javascript - 单击、拖动和调整大小事件混合在一起

Question

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

我的代码看起来像这样:

$("#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') 选择的调用，因此不必选择该元素三次(现在只需一次)。