Chrome 点击触摸板触发 mouseleave

Question

最近，我的网站在 Chrome 中开始运行异常。我发现在 Chrome 中，现在点击触摸板（自最近更新以来？）会触发两个事件 - click 和 mouseleave。

<div id="tap">HOVER, TAP or CLICK</div>
<script>
tap.addEventListener("mouseleave",function(){alert("mouseleave");});
tap.addEventListener("click",function(){alert("click");});
</script>

这里是 JSFiddle:

到目前为止，这个问题似乎只适用于 Google Chrome。在 Firefox 和 Yandex（基于 Chromium）中，假 mouseleave 不会触发。单击按钮（鼠标或触摸板按钮）也可以正常工作 - 没有 mouseleave.

我怎样才能防止点击鼠标离开？或者，也许，有一种方法可以区分 tap-mouseleave 和真正的 mouseleave？

Answer 1

我注意到当 Chrome 中发生不正确的点击行为时，我们可以检查 mouseleave 事件对象以确定它是否是错误行为：

mouseleave = function (e) {
  if (e.screenX === 0 && e.screenY === 0) {
    // BUG in Chrome
    return;
  }
  // Correct behavior...
}

或者，我们可以检查 e.toElement and/or e.relatedTarget，因为我注意到当错误行为发生时它们是 null：

mouseleave = function (e) {
  if (!e.relatedTarget || !e.toElement) {
    // BUG in Chrome
    return;
  }
  // Correct behavior...
}

Chrome 点击触摸板触发 mouseleave

Chrome tapping on touchpad fires mouseleave

javascript

google-chrome

mouseleave

touchpad

dom-events