单击事件会影响 chrome 上的 mouseenter 和 mouseleave,这是一个错误吗?

J.J*_*J.J 5 google-chrome click mouseenter mouseleave

添加mouseenter和mouseleave事件后,点击元素(点击次数不确定)?mouseenter和mouseleave会被触发。

我尝试了 chrome 62.0.3202.94?32??firework?IE,它只发生在 chrome 上。这是 chrome 的错误吗?或者只是我的代码有问题?

在线示例:http : //runjs.cn/code/cbb0aw1a

代码如下:

<!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>
Run Code Online (Sandbox Code Playgroud)

Ste*_*fel 3

我可以确认 chrome(版本 62.0.3202.94)上的行为。

多次单击某个元素时,有时会触发 mouseleave,且 MouseEvent 上的 relatedTarget/toElement 属性为“null”(screenX、screenY 属性均为 0)。

该行为是随机的,有时需要连续点击 2 次,有时需要超过 20 次。点击速度/速率似乎也无关紧要。

到目前为止,我通过检查事件的 relatedTarget 属性(如果“null”不执行任何操作)来避免在 onMouseLeave(event) 方法中执行不需要的代码。不知道是否还有另一种有用的情况,其中 relatedTarget 可能为空......