CODEWITHSUNDEEP
google-chromeclickmouseentermouseleave
J.J
J.J

Reputation: 51

click event affects mouseenter and mouseleave on chrome, is it a bug?

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>

Upvotes: 5

Views: 2081

Answers (1)

Stefan Holzapfel
Stefan Holzapfel

Reputation: 532

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...

Upvotes: 3

Related Questions