Событие щелчка срабатывает, когда я перетаскиваю в 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 наружу и отпускаю кнопку мыши снаружи, это вызывает событие click снаружи в 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);
    }
});