Question

我有一个div，我想将click，drag和resize事件应用到。但是，当我开始结束拖动时，会激活click事件（与结束调整大小相同）。有谁知道如何避免这种情况？

我的代码看起来像这样：

$("#foo").click(function() {
     //click handler
});

$("#foo").draggable({
     stop: function() {//dragstop handler}
});

$("#foo").resizable({
     stop: function() {//resizestop handler}
});

当我完成拖动元素时，会调用dragstop和click个处理程序。与调整大小和单击相同。关于如何避免这种想法的任何想法？

Answer 1

当您从鼠标按钮上移开手指时，click事件会触发，您可以使用此功能。您可以在其他事件处理程序中设置一个标志，表明它们已被使用，如果是，那么您就可以不在click事件处理程序中运行代码：

var doClick = true;
$("#foo").click(function() {

     //check if the other event handlers were used, if they were then doClick will equal false and this `if` statement will resolve to false
     if (doClick) {
         //run code for click event handler here
     } else {
         //setup the flag for next-time
         doClick = true;
     }
}).draggable({
     stop: function() {

         //set flag to disallow click event handler
         doClick = false;
     }
}).resizable({
     stop: function() {

         //set flag to disallow click event handler
         doClick = false;
     }
});

另请注意，我将调用更改为$('#foo')选项，因此不必选择元素三次（现在只需一次）。

Answer 2

几天前我遇到了这个问题，这就是我解决它的方法。不知道这是否是最佳方式。基本上，您也会将mousedown和mouseup事件绑定到您的元素，以便在mousedown上禁用单击处理程序，并在mouseup上重新设置处理程序。您可能还想在其他地方定义单击回调函数，以便您可以引用它而无需使用重复的匿名函数：

这是一个JSFiddle示例：http://jsfiddle.net/uQGMu/

var clickHandler = function () {
    alert('clicked');
};

$("#foo").click(clickHandler);

$("#foo").draggable({
    stop: function() {
        alert('stopped dragging');
    }
});

$("#foo").bind('mousedown', function() {
    $('#foo').unbind('click', clickHandler);
});

$('#foo').bind('mouseup', function() {
    $('#foo').bind('click', clickHandler);
});

单击，拖动和调整混合事件的大小

2 个答案: