javascript - 单击内部元素并将鼠标拖动到外部

Question

我敢肯定有人已经遇到过这样的问题，但不幸的是我找不到答案。

window.onload = function (e) {
    var foo = document.getElementById('foo');
    foo.addEventListener('click', function(e) {
      e.stopPropagation();
      e.preventDefault();
      alert('foo');
    });
    document.body.addEventListener('click', function(e) {
      alert('body');
    });
};

#foo {
  width: 200px;
  height: 200px;
  background-color: red;
  cursor: pointer;
}
body,
html {
  width: 100%;
  height: 100%;
}

<div id="foo">Click me</div>

请参阅jsfiddle和 我将逐步描述我的问题:

1) 点击红色div 2) 不要松开鼠标键并拖到外面

如您所见，触发了正文点击功能。这就是我想要禁用的。我想检测用户是否在 div 内部单击，如果他/她拖到它外面，则什么都不会发生!

Answer 1

看起来 Firefox 是唯一一个在光标离开原始元素时不会触发点击的浏览器。在与 webkit 相关的浏览器上，没有原始 mousedown 的踪迹，但所有事件数据都基于这样的事实，就好像在 body 上触发了完整的点击。所以没办法根据点击本身来区分。可能有一些解决方法，但这里有一个 - 检查是否有任何点击来自元素上的 mousedown :

window.addEventListener('load', function() {

var foo = document.getElementById('foo'), fromfoo,
origin  = document.getElementById('origin');

foo.addEventListener('mousedown', function(e) {

    e.stopPropagation();

    fromfoo = true;
});

document.body.addEventListener('mousedown', function() {

    fromfoo = false;
});

foo.addEventListener('mouseup', function(e) {

    e.stopPropagation();

    if (fromfoo) origin.innerHTML = 'foo';
});

document.body.addEventListener('mouseup', function() {

    if (fromfoo) origin.innerHTML = 'different';
    else origin.innerHTML = 'body';
});
});

html, body {
  width:100%;
  height:100%;
  margin: 0;
}

#origin {
  float: right;
  margin: 50px 100px;
}

#foo {
  width:200px;
  height:200px;
  background-color: red;
  cursor:pointer;
}

<div id="origin"></div>
<div id="foo">Click me</div>

这是一个很好的解决方法，但部分原因是为了使其与 Mozilla 反向兼容。

编辑 - 很奇怪，这是 Microsoft documentation 的内容说:

For example, if the user clicks the mouse on the object but moves the mouse pointer away from the object before releasing, no onclick event occurs.

但似乎根本不是这样。

---

更新 - 经过大量搜索后也找到了这份报告:

https://code.google.com/p/chromium/issues/detail?id=484655

所以这似乎至少是错误行为或对 W3 规范的误解。显然是 IE 的一个已知问题，也是最近在 Chrome 中出现的一个问题。 This question from 2013 about IE only looks related as well。有人发布了一个小插件，您可能仍然感兴趣:

Internet Explorer leaks click event after adding an overlay in a jQuery mousedown handler