jQuery上下文菜单 - 查找触发它的元素答案

【问题标题】：jQuery context menu - finding what element triggered it offjQuery上下文菜单 - 查找触发它的元素
【发布时间】：2010-12-13 14:51:29
【问题描述】：

我正在尝试为我的页面编写上下文菜单选项。基本上一个 div 被右击，弹出一个选项菜单，可以用来执行任务。

我的问题是试图找到触发一切的原始元素（即右键单击的 div）。

我的 jQuery 代码或多或少：

//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>

-- 所以 - 当初始右键单击发生时，我可以看到哪个元素创建了事件。但不是在单击菜单项时。

我正在努力通过在右键单击时将元素写入隐藏的文本框，然后在单击其中一个选项时读取它，然后在菜单关闭时将其删除，从而将某些东西放在一起。不过，这似乎不是理想的方法——我觉得我缺少一些基本的东西。

希望你能看到我想要做什么。我可以根据要求发布更完整的示例。

【问题讨论】：

标签： jquery html css contextmenu

【解决方案1】：

您可以考虑使用 jQuery data storage 方法。

您可以在上下文菜单代码中输入：

$('.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;
});

那么当你想引用发起点击的元素时，你可以这样做：

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

并将originalElement 放入jQuery 函数$() 以访问jQuery 的优点。将数据放在哪里并不重要，因为任何 DOM 元素都可以有与之关联的数据。你可以存储任何东西——在上面的示例代码中，我存储了HTMLElement raw（不是 jQueryified），但如果你愿意，你也可以存储它。

这里有一个小例子：http://www.jsfiddle.net/jonathon/sTJ6M/

【讨论】：

两点说明： 1. 您正在使用选择器引擎多次查找#contextMenu 元素。缓存该 jQuery 对象是合理的：var $contextMenu = $("#contextMenu"); 2。防止 originalElement 未定义可能是个好主意，在这种情况下 originalElement.id 会引发错误。
干杯Šime。我同意你的观点，但我不太关心重构。我只是插入 OP 的代码，并明确说明如何使用数据方法。在这种情况下，您可以从链接中受益，而不是缓存对象，而不需要额外的变量:)
感谢 Jonathon，这正是我所需要的！

【解决方案2】：

我添加一个隐藏字段，然后根据点击找到它，像这样：

<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>

然后用 JQuery

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

【讨论】：

你可能想看看数据存储方法——它省去了为这样的事情创建隐藏的输入类型（并且让你可以保存任何对象，而不仅仅是字符串）：api.jquery.com/category/miscellaneous/data-storage
看起来很酷，但问题是..它会在执行左键单击时触发.. +1 :)

【解决方案3】：

我在这里聚会有点晚了，但我发现当上下文菜单生成时，活动项目会添加“上下文菜单活动”类。这可能仅在较新的版本中。我正在使用上下文菜单 1.6.6。

只需添加：

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

到上下文菜单处理程序。这里结合了示例代码。

$(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);
    })
});

【讨论】：