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?
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...
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments