jQuery context menu - finding what element triggered it off

问题

I am trying to write a context menu option for a page of mine. Basically a div is right-clicked, an options menu pops up which can be used to perform tasks.

My problem is trying to find the original element which triggered everything (ie the div that was right-clicked).

My jQuery code is more or lesS:

//this is what displays the context menu
$('.outfeedPosition').bind("contextmenu", function (e) {
    $('#contextMenu').css({
        top: e.pageY + 'px',
        left: e.pageX + 'px'
    }).show();

    //'this' is the element which was clicked by the user.
    alert($(this).attr('id'));

    return false;
});



//this is the contextMenu's button handler.
$('#ctxDelete').click(function () {
    alert('delete was clicked, but i dont know by which element - so I dont know which one to delete');
});


<div id="contextMenu">
    <ul>
        <li><a id="ctxInsert" href="#">Insert</a></li>
        <li><a id="ctxEdit" href="#">Edit</a></li>
        <li><a id="ctxDelete" href="#">Delete</a></li>
    </ul>
</div>

-- So - I can see what element created the event when the initial right-click happens. But not when the menu item is clicked.

I was working on fumbling something together by writing the element out to a hidden textbox when it is right-clicked, then reading it when one of the options is clicked, then removing it when the menu closes. Doesn't seem like the ideal approach though - and I feel like i'm missing something basic.

Hope you see what I am trying to do. I can post a more complete example on request.

回答1:

You could consider using the jQuery data storage methods.

In your context menu code you can put:

$('.outfeedPosition').bind("contextmenu", function (e) {
    $('#contextMenu').css({
        top: e.pageY + 'px',
        left: e.pageX + 'px'
    }).show();

    //Store the item that was clicked 
    $("#contextMenu").data('originalElement', this);

    return false;
});

Then when you want to reference the element that initiated the click, you can just do this:

$('#ctxDelete').click(function () {
    var originalElement = $("#contextMenu").data('originalElement');
    alert('delete was clicked by ' + originalElement.id );
});

And put originalElement in the jQuery function $() to access the jQuery goodness. It doesn't matter where you put the data, since any DOM element can have data associated to it. You can store anything - in the example code above, I store the HTMLElement raw (not jQueryified) but you can store that too if you want.

See here for a little example: http://www.jsfiddle.net/jonathon/sTJ6M/

回答2:

I add a hidden field and then find it based on the click, like this:

<div class="myItem">
    <div id="contextMenu">
        <ul>
            <li><a id="ctxInsert" href="#">Insert</a></li>
            <li><a id="ctxEdit" href="#">Edit</a></li>
            <li><a id="ctxDelete" href="#">Delete</a></li>
        </ul>
    </div>
    <input type="hidden" class="myID" value="1">
</div>

then with JQuery

$('#ctxDelete').click(function () {
    var id = $(this).closest('.myItem').find('.myID').val();   
    alert('delete was clicked, by element with ID = ' + id);
});

回答3:

I'm a little late to the party here but I found that when the context menu is generated the active item gets the 'context-menu-active' class added to it. This may only be in more recent versions. I'm using context menu 1.6.6.

Simply add:

var originalElement = $('.context-menu-active');

to the context menu handler. Here it is combined with the example code.

$(function(e){
    $.contextMenu({
        selector: '.context-menu-one',
        callback: function(key, options) {
            var originalElement = $('.context-menu-active');
            var m = "clicked: " + originalElement[0].innerHTML;
            window.console && console.log(m);
        },
        items: {
            "edit": {name: "Edit"},
            "cut": {name: "Cut"},
            "copy": {name: "Copy"},
            "paste": {name: "Paste"},
            "delete": {name: "Delete"},
            "sep1": "---------",
            "quit": {name: "Quit"}
        }
    });

    $('.context-menu-one').on('click', function(e){
       console.log('clicked', this);
    })
});

来源：https://stackoverflow.com/questions/4430015/jquery-context-menu-finding-what-element-triggered-it-off