1

最近,我的网站开始在 Chrome 中运行得很奇怪。我发现在 Chrome 中,现在点击触摸板(因为最近的更新?)会触发两个事件 -clickmouseleave.

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

这是JSFiddle

到目前为止,这个问题似乎只适用于谷歌浏览器。在 Firefox 和 Yandex(基于 Chromium)中,fakemouseleave不会触发。单击按钮(鼠标或触摸板按钮)也可以正常工作 - 没有mouseleave

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

4

1 回答 1

5

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

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

或者,我们可以检查e.toElement和/或e.relatedTarget,因为我注意到那些null在错误行为发生时:

mouseleave = function (e) {
  if (!e.relatedTarget || !e.toElement) {
    // BUG in Chrome
    return;
  }
  // Correct behavior...
}
于 2018-03-05T16:27:26.480 回答