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

我有一个div，我想将它应用到

单击

，

拖动

，以及

调整大小

事件。但是，当我开始结束拖动时，单击事件被激活（与结束调整大小相同）。有人知道如何避免这种情况吗

我的代码如下所示：

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

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

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

---

当我完成拖动一个元素时，将调用

dragstop

和

click

处理程序。与“调整大小并单击”相同。有没有办法避免这个问题？

几天前我遇到了这个问题，下面是我如何解决的。但不确定这是否是最好的方式。基本上，您也将

mousedown

和

mouseup

事件绑定到元素，以便在

mousedown

上禁用单击处理程序，在

mouseup

上重新启用处理程序。您可能还希望在其他位置定义click回调函数，以便无需使用重复的匿名函数即可引用它：

下面是一个JSFIDLE示例：

---

​

当您将手指从鼠标按钮上移开时，

单击

事件将触发，您可以利用这一点。您可以在其他事件处理程序中设置一个标志，表明它们已被使用，如果是这样，您就不能在

单击
事件处理程序中运行代码：

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'）
选择的调用，这样就不必选择元素三次（现在只选择一次）。
唯一的问题是，如果在调整大小后鼠标位于元素外部（由于maxwidth或超出窗口），则它将禁用下一次（实际）单击。解决这个问题的方法是，如果$（“.ui-resizeable-e”）为（“：hover”），则只阻止下一次单击
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;
     }
});