【JavaScript】mouseover和mouseenter的区别

兔子码农笔记

已于 2022-03-05 22:11:33 修改

阅读量854

点赞数 4

分类专栏： JavaScript 文章标签： css 前端 javascript

于 2022-03-05 22:09:28 首次发布

本文链接：https://blog.csdn.net/weixin_43790653/article/details/123301758

版权

JavaScript 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

共同点： 都是鼠标经过元素时，会触发事件。
不同点：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不会冒泡。

兔子码农笔记

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】mouseover和mouseenter的区别

共同点：都是鼠标经过元素时，会触发事件。不同点：mouseenter不会冒泡。所以当使用mouseover时，鼠标经过盒子本身会触发，鼠标经过子盒子也会触发（因为冒泡）。而使用mouseenter时，只有经过盒子本身才会触发。代码测试：分别给父元素绑定mouseover事件和mouseenter事件。<style> .father { width: 300px; height: 300px; .
复制链接

扫一扫