Question

我有一个垂直拖动元素#navSY。它工作正常，但有一个小问题。每次我执行mouseup时，页面其余部分的鼠标事件都会被触发/取消触发。例如，每次拖放mousedown时，被拖动元素正下方的元素都会触发#navSY事件（更准确地说，#navSY始终保持在该元素内 - 在此之前和之后拖动）。

此外，unbind事件导致我的其他插件表现得很糟糕，即点击和mousedown无法识别。

我认为错误是因为我正在做jQuery(document).unbind();我应该定位元素#navSY和特定事件mousedown。我试图理解jQuery中的bind / unbind但是因为我是newbee而无法获得更多。任何帮助将不胜感激。

jQuery('#navSY').bind({
        mousedown: function() {
            jQuery(document).mousemove(function(e) {
            if(e.pageY>220) {
                jQuery('#navSY').css({
                    top: e.pageY - 2,
                });
    ...do...
            }
            else {
                jQuery(document).unbind();
            }
            });
        },
        mouseup: function() {
            jQuery(document).unbind();
        }
    });

Answer 1

我必须看到你的其余代码，但是如果你添加一些与event.target相关的内容，它可能有所帮助：

$('#elementBelowTheDraggedElement').on('mousedown',function(e) {
    var target = $(e.target);        

    if(target.is('#navSY')) {
        //'return' stops execution of this function
        return;
    } else {
        //do what you originally wanted that mousedown event to do
    }
});

这应该使得如果在#navSY上发生了mousedown事件，那么 #navSY下的元素的函数就不会执行（如果一切顺利的话）。

要取消绑定特定功能，请尝试：

jQuery('#navSY').bind({
    mousedown: function() {
                                    //name the function?
        jQuery(document).mousemove(function myFunction(e) {
        if(e.pageY>220) {
            jQuery('#navSY').css({
                top: e.pageY - 2,
            });
...do...
        }
        else {

                                      //unbind that specific function?
            jQuery(document).unbind('mousemove.myFunction');
                                     /***********/
        }
        });
    },
    mouseup: function() {
        jQuery(document).unbind();
    }
});

jQuery - 拖动元素-unbind / bind of mousedown / up触发其他mousedown事件

1 个答案: