Question

我确定那里的人已经有这样的问题，但遗憾的是我无法找到答案。

＆＃13;

private enum Result { VALID, INVALID, DID_NOT_RUN }
private Result validity = Result.DID_NOT_RUN;
...

＆＃13;

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');
    });
};

＆＃13;

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

＆＃13;

请参阅jsfiddle和我将一步一步地描述我的问题：

1）单击红色div 2）不要释放鼠标按钮并将其拖到外面

您可以看到身体点击功能触发。这就是我要禁用的内容。我想检测用户是否在div内部点击，如果他/她拖到它外面，什么都不会发生！

Answer 1

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

＆＃13;

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';
});
});

＆＃13;

html, body {
  width:100%;
  height:100%;
  margin: 0;
}

#origin {
  float: right;
  margin: 50px 100px;
}

#foo {
  width:200px;
  height:200px;
  background-color: red;
  cursor:pointer;
}

＆＃13;

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

＆＃13;

相当多的解决方法，但部分原因是因为它与Mozilla反向兼容。

编辑 - 非常奇怪这是Microsoft documentation所说的：

例如，如果用户在对象上单击鼠标但在释放之前将鼠标指针移离对象，则不会发生onclick事件。

但这似乎并非如此。

更新 - 经过多次搜索后也找到了这份报告：

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

所以它似乎至少是有缺陷的行为或对W3规范的误解。显然是IE的一个已知问题，最近出现在Chrome上。 2013年关于IE的这个问题看起来也只是相关的。有人发布了一个可能感兴趣的小插件：

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

Answer 2

使用：

e.stopImmediatePropagation();

阻止调用同一事件的其他侦听器。

来源MDN：https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation

window.onload = function (e) {
    var foo = document.getElementById('foo');
    foo.addEventListener('click', function(e) {
      e.stopImmediatePropagation();
      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>

单击元素内部并将鼠标拖到其外部

2 个答案: