jQuery右键菜单与jQuery拖放功能冲突

Question

我正在尝试在jQGrid中使用jQuery Draggable行的jQuery Context Menu。 问题是自从我添加了jQuery Context Menu后，单击操作（以及正常拖动）都会触发可拖动操作。 当我右键单击一行来获取菜单，然后在其他行上单击（以放弃菜单），那行开始跟随光标移动，这看起来有点奇怪。 这与以下代码段中的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();

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

- Carl R

Answer 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中这种方式可以很好地工作。

- Bill B

---

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

Answer 2

我曾遇到相同的问题，只需将jquery.contextMenu.js文件中的前两个*.stopPropagation()注释掉即可。现在一切都正常了。

在这种情况下，这些阻止事件传播的唯一可能用途可能是为了实现最小的性能优化。事实上，用*.preventDefault()替换它们对我来说更有意义。我有什么遗漏吗？

- idFlood