5

after adding events both mouseenter and mouseleave,click the element(the times of click is uncertain)，the mouseenter and mouseleave will be triggered.

I try chrome 62.0.3202.94（32），firework，IE,and it only happened on chrome.Is it a bug of chrome，or just something wrong with my code?

The example online:http://runjs.cn/code/cbb0aw1a

the code follows there:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h4>click on the parent part,then see the console </h4>
<div class="parent" style="width: 100%;height: 100px;background-color: #ddd">
    <div class="children" style="width: 50px;height: 50px;background-color: #d9534f;cursor: pointer">
        test
    </div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
    $(".parent").mouseenter(function () {
        console.log("enter")
    }).mouseleave(function () {
        console.log("leave")
    });

</script>
</html>
zzzzBov
  • 174,988
  • 54
  • 320
  • 367
J.J
  • 51
  • 5

1 Answers1

3

I can confirm the behaviour on chrome (Version 62.0.3202.94).

When clicking an element multiple times, occasionally mouseleave is fired with a relatedTarget/toElement property of "null" on the MouseEvent (screenX, screenY properties both 0).

The behaviour is random, sometimes it needs 2 subsequent clicks, sometimes more than 20. Clicking speed/rate seems irrelevant too.

By now I avoid the execution of unwanted code in my onMouseLeave(event) method by checking the relatedTarget property of the event(if "null" do nothing). Don't know if there is another useful case where relatedTarget could be null...

Stefan Holzapfel
  • 364
  • 3
  • 13
  • 1
    relatedTarget would also be null in case the element's mouseleave property is triggered when the mouse leaves the element to go out of the browser tab. – mlakhara Jul 19 '18 at 09:37
  • @mlakhara That got me too. To fix, can check the `Event.clientX` and `clientY` against the window size. `if (!e.toElement && (e.clientX < 0 || e.clientX > window.innerWidth || e.clientY < 0 || e.clientY > window.innerHeight))` – buck54321 Feb 28 '21 at 16:50