javascript - 当我在 chrome 中拖动时触发单击事件

Question

我有一个由 div 表示的对话框，当我单击该 div 外部的某个位置时，我想关闭它。

我使用这个 JQuery 代码：

$(document).bind('click', function(e) {
  var clicked = $(e.target);
  if (!clicked.parents().hasClass("dialog-wrapper")) {
    $('.dialog-wrapper').hide(500);
  }
});

工作示例在这里：

https://jsfiddle.net/ho2p3fnc/

当我在 div 之外单击时，它可以正常工作。当我单击 div 内部时，它可以正常工作。

但是，当我从 div 内部拖动到外部并在外部释放鼠标按钮时，它会在 Chrome 外部触发单击事件

如何防止 chrome 中的这种行为？

标签： javascriptjqueryhtmlgoogle-chrome

Answer 1

我会使用 2 个事件来做到这一点。一个检查点击来自哪里，另一个检查点击结束时触发。像这样的东西：

var fromDialog = true;

document.addEventListener('mousedown', function(e) {
    var clicked = $(e.target);
    fromDialog = clicked.parents().hasClass("dialog-wrapper");
});

document.addEventListener('mouseup', function(e) {
    if(!fromDialog) {
       $('.dialog-wrapper').hide(500);
    }
});