jQuery 上下文菜单与 jQuery Draggable 冲突答案

【问题标题】：jQuery Context Menu clashes with jQuery DraggablejQuery 上下文菜单与 jQuery Draggable 冲突
【发布时间】：2011-07-22 10:16:23
【问题描述】：

我正在尝试 jQuery Context Menu 和 jQuery Draggable 在 jQGrid 中的行。

我遇到的问题是，自从我添加了jQuery Context Menu 后，单击即可触发可拖动操作（以及正常拖动）。当我右键单击一行以获取菜单，然后在其外部单击另一行（以丢弃菜单）并且该行开始跟随光标时，它看起来有点奇怪。

它是否与以下 jQuery 上下文菜单中的 sn-p 中的 evt.stopPropagation(); 有关？

$(this).mousedown( function(e) {
    var evt = e;
    evt.stopPropagation();
    $(this).mouseup( function(e) {
        e.stopPropagation();
        var srcElement = $(this);
        $(this).unbind('mouseup');
        if( evt.button == 2 ) {
            // Hide context menus that may be showing
            $(".contextMenu").hide();

除了在可拖动菜单或上下文菜单之间进行选择之外，我还能做些什么吗？

【问题讨论】：

标签： jquery jquery-ui jquery-plugins contextmenu jquery-ui-draggable

【解决方案1】：

我遇到了一个相关的问题——带有附加上下文菜单的可拖动项目并不总是可拖动的。在我的例子中，带有附加上下文菜单的可拖动项目（浮动在较大的包含 div 元素中的 div 元素）只能拖动一次 - 一旦拖动完成，该项目将不再可拖动，直到您单击包含 div。几乎相同的没有上下文菜单的可拖动项目总是可拖动的。为什么单击容器恢复了可拖动性我不知道，但它始终如一。

感谢您的问题为我指明了正确的方向，我查看了上下文菜单代码并对其进行了如下修改，从而解决了我的问题：

jQuery(this).mousedown( function(e) {
    var evt = e;
    if (e.button == 2) //Added to make this compatible with draggable
        evt.stopPropagation();
    jQuery(this).mouseup( function(e) {
        if (e.button == 2) //Added to make this compatible with draggable
            e.stopPropagation();
        var srcElement = jQuery(this);

添加对 e.button == 2 的检查停止传播右键单击事件，现在我的可拖动 div 保持可拖动状态，上下文菜单仍然有效。到目前为止，我只在 IE8 中对此进行了测试，我不知道它是否能解决您的问题，但我很想知道它是否可以。

==编辑==

根据 Carl R 关于与 Chrome 兼容的建议：

jQuery(this).mousedown( function(e) {
    var evt = e;
    if (e.button != 2) return; //Added to make this compatible with draggable
    evt.stopPropagation();
    jQuery(this).mouseup( function(e) {
        e.stopPropagation();
        var srcElement = jQuery(this);

我已经按照他的建议更改了模式，并且以这种方式在 IE8 中运行良好。

【讨论】：

它在 chrome 中对我不起作用。我将代码更改为$(this).mousedown(function(e) { if (e.button != 2) //Added to make this compatible with draggable { return; } 并跳过了第二个按钮检查。到目前为止它似乎有效。

【解决方案2】：

我遇到了同样的问题，只是简单地评论了 jquery.contextMenu.js 中的前两个 *.stopPropagation()。现在一切正常。

在这种情况下，这些停止的唯一可能用途可能是一些最低性能。事实上，用 *.preventDefault() 替换这些对我来说更有意义。我错过了什么吗？

【讨论】：