JavaScript中 mouseenter 和 mouseover 的区别

最新推荐文章于 2024-09-12 16:31:59 发布

01xm

最新推荐文章于 2024-09-12 16:31:59 发布

阅读量659

点赞数 3

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

本文链接：https://blog.csdn.net/Bon_nenul/article/details/118028166

版权

JavaScript 专栏收录该内容

44 篇文章 3 订阅

订阅专栏

mouseenter事件和mouseover事件的区别

mouseenter事件和mouseover事件很相似，都是当鼠标移动到元素上就会触发mouseover事件。下面就说一下两者的区别：

当鼠标移动到元素上时就会触发 mouseenter事件，而mouseenter 只会经过自身盒子触发，因为mouseover不会冒泡。

mouseover鼠标经过自身盒子会触发，经过子盒子还会触发

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