0
点赞
收藏
分享

微信扫一扫

【JavaScript】mouseover和mouseenter的区别

我是小瘦子哟 2022-03-11 阅读 51
  • 共同点: 都是鼠标经过元素时,会触发事件。
  • 不同点:mouseenter不会冒泡。
    所以当使用mouseover时,鼠标经过盒子本身会触发,鼠标经过子盒子也会触发(因为冒泡)。而使用mouseenter时,只有经过盒子本身才会触发。

代码测试:
分别给父元素绑定mouseover事件和mouseenter事件。

<style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 10px auto;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
<body>
    <div class="father">
        father
        <div class="son">son</div>
    </div>
    <script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        father.addEventListener('mouseover', function () {
            console.log(11);
        })
        father.addEventListener('mouseenter', function () {
            console.log(22);
        })
    </script>
</body>

效果如下:
在这里插入图片描述

与之相对的有鼠标离开事件mouseout和mouseleave,同样,mouseleave不会冒泡。

举报

相关推荐

0 条评论