退出mousedown事件触发的jquery函数答案

【问题标题】：Exit jquery function triggered by mousedown event退出mousedown事件触发的jquery函数
【发布时间】：2014-08-23 06:01:51
【问题描述】：

我有一个像这样的 jquery 函数：

$(function(){
    $('.viewArea').mousedown(function(event) {
        if(event.which === 3){  // On right click
            pos = ("(" + event.pageX + "," + event.pageY + ")");
            console.log(pos);  // Log the xy coords of click to console
            $.contextMenu("destroy");  // Unregister previous context menu
            $.contextMenu({  // Create new context menu
                selector: '.viewArea',
                callback: function(key, options){
                    var m = "clicked: " + key;
                    window.console && console.log(m);
                },
                items: {
                    "pos":{name:pos,disabled:true}, // have pos in context menu
                    "ci1":{name:"ContextMenu 1"},
                    "ci2":{name:"ContextMenu 2"}
                }
            });
        }
    })
});

这个函数使用jquery插件“jQuery contextMenu”。

我想要的是能够右键单击并将 pos 坐标显示在上下文菜单中。问题是，在创建第一个上下文菜单后，立即创建第二个上下文菜单（右键单击别处）将不会显示更新的坐标。退出第一个上下文菜单（通过左键单击外部，或选择一个选项）然后打开一个新的上下文菜单将显示更新的坐标。

对问题的深入检查表明，如果您不断右键单击打开上下文菜单，控制台没有记录任何内容，而它应该记录新位置。换句话说，它只检测一次右键单击，并且在发生不同的输入之前不会再次执行该函数。

我尝试过使用 .click 事件（以及左键单击），但同样的问题发生了。我还尝试将 jquery.contextMenu.js 中的重新定位标志更改为 false，假设上下文菜单没有重建，但这似乎也没有改变任何东西。

任何帮助将不胜感激。

【问题讨论】：

能否提供一个 jsfiddle，以便我们将问题可视化？
@Raptus 我本来应该这样做的..http://jsfiddle.net/Ruxb7/。此外，我通过删除菜单重新定位的代码部分，实现了一个相当混乱的解决方案，即更改上下文菜单的 javascript 文件。不幸的是，这将导致上下文菜单关闭，然后您需要再次右键单击以重新打开它。所以它并不能解决根本问题，但它确实可以防止用户从多次右键单击问题中获取错误信息。

标签： jquery html events contextmenu

【解决方案1】：

该插件的作者在这里...

我不确定你想要在那里实现什么。但为了帮助您走向正确的方向，我已将您的示例修复为使用 position 函数来调用对您的位置显示的更新。

http://jsfiddle.net/Ruxb7/1/

【讨论】：

这正是我想要的。谢谢，这非常有帮助。

【解决方案2】：

目前这是不可能的。通过检查 jsfiddle 上的 html，您可以看到 contextMenu 的实现方式，一个不可见的元素被放置在您将 contextMenu 绑定到的任何元素上（.viewArea）。您可以通过检查覆盖元素 #context-menu-layer 自己验证这一点（使用 jQuery 搜索此元素在 jsfiddle 中不起作用，因为输出示例位于 iframe 中。不过，您可以手动检查chrome 调试器。）

您还可以通过查看source code 来验证这一点。在第 347 行的 layerClick 函数中，您可以看到所有事件都被此处理程序杀死（第 358-359 行）。处理程序绑定到第 1189 行 #context-menu-layer 上的所有 mousedown 事件。

我建议使用适合您需求的不同库。

与此同时，我已向 jQuery contextMenu 创建者/维护者提交了bug。

【讨论】：