Chrome tapping on touchpad fires mouseleave

Question

Recently, my website began to work quite weirdly in Chrome. I found that in Chrome, tapping a touchpad now (since a recent update?) fires two events - click and mouseleave.

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

Here is the JSFiddle:

So far, it seems like this issue only applies to Google Chrome. In Firefox and Yandex (Chromium based) fake mouseleave doesn't fire. Clicking by button (either mouse or touchpad button) also works fine - no mouseleave.

How can i prevent this mouseleave on tap? Or, maybe, there's a way to tell a tap-mouseleave from the real mouseleave?

Answer 1

I've noticed that when the incorrect tapping behavior happens in Chrome, we can inspect the mouseleave event object to determine if it's the buggy behavior or not:

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

Alternatively, we can check e.toElement and/or e.relatedTarget, since I've noticed those being null when the buggy behavior happens:

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