23、mouseenter 和mouseover的区别

最新推荐文章于 2024-11-02 12:42:04 发布

是瑞瑞小甜心

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量101

点赞数

分类专栏： WebAPI 文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/weixin_45998542/article/details/122005885

版权

WebAPI 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

23、mouseenter 和mouseover的区别

当鼠标移动到元素上时就会触发mouseenter 事件
类似 mouseover，它们两者之间的差别是
mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发
之所以这样，就是因为mouseenter不会冒泡
跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        // mouseenter经过自己才会触发事件 没有冒泡
        // mouseover经过自己和孩子都会触发事件 有冒泡
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        father.addEventListener('mouseenter', function() {
            console.log(11);
        })
    </script>
</body>