mouseenter 和mouseover的区别

最新推荐文章于 2025-07-29 20:32:51 发布

MoMokolyouo

最新推荐文章于 2025-07-29 20:32:51 发布

阅读量194

点赞数

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.csdn.net/qq_43342124/article/details/121460047

mouseenter和mouseover都是JavaScript中的鼠标事件，但它们的行为有所不同。mouseover事件在鼠标进入元素及其子元素时都会触发，而mouseenter事件只在鼠标进入元素本身时触发，不会因经过子元素而再次触发。因此，mouseenter事件不会发生冒泡现象。在实际应用中，如果只想在鼠标真正进入元素边界时执行操作，mouseenter是更好的选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mouseenter 和mouseover的区别
mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发
之所以这样，就是因为mouseenter不会冒泡
跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡
在这里插入图片描述

 <div class="father">
        <div class="son"></div>
    </div>

father为粉色盒子

var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        father.addEventListener('mouseover', function() {
            console.log(11);

        })