当我在 chrome 中拖动时触发单击事件答案

【问题标题】：Click event fired when I do drag in chrome当我在 chrome 中拖动时触发单击事件
【发布时间】：2019-04-23 22:50:56
【问题描述】：

我有一个由 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 中防止这种行为？

【问题讨论】：

尝试使用mouseup监听器而不是click（不在拖动事件中）
我认为你最好在模态下方有一个覆盖整个屏幕的图层。这几乎是所有模态库所做的，除了正常的点击事件之外不需要任何特殊的东西。也意味着您可以使背景变暗并在模式外部单击以将其关闭，这不会因意外单击他们不希望的内容而导致不必要的操作。
一般避免模态框/对话框。

标签： javascript jquery html google-chrome

【解决方案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);
    }
});

【讨论】：