click事件会影响chromeenter上的mouseenter和mouseleave,这是一个错误吗?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (742)

在添加了mouseenter和mouseleave两个事件后,单击该元素(点击次数不确定),将触发mouseenter和mouseleave。

我尝试chrome 62.0.3202.94(32),烟花,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>
提问于
用户回答回答于

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

多次单击元素时,有时会在MouseEvent(screenX,screenY属性均为0)上使用相关的目标/ toElement属性“null”触发mouseleave。

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

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

扫码关注云+社区

领取腾讯云代金券