触摸板上的Chrome点击会触发mouseleave

Posted 2021-05-03

最近，我的网站开始在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。在FF和Yandex（以铬为基础）的假鼠栏中不会发射。单击按钮（鼠标或触摸板按钮）也可以正常工作 - 没有鼠标。

我怎样才能防止这个鼠标悬停？或者，也许，有一种方法可以从真正的鼠标中分辨出一个tap-mouseleave？

答案

我注意到，当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...
}

另一答案

我目前遇到同样的问题。你找到了解决方案吗？

我怀疑它是否与某些特定的CSS有关，因为我在两个不同的站点上有相同的mouseleave事件，但我只能在一个上看到这个问题。