mouseenter和mouseover的区别

最新推荐文章于 2025-12-25 09:07:35 发布

原创最新推荐文章于 2025-12-25 09:07:35 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文通过一个简单的示例介绍了如何使用 JavaScript 的 mouseenter 和 mouseover 事件。通过为父元素及其子元素添加事件监听器，演示了这两种鼠标事件的区别：mouseover 事件会连续触发，而 mouseenter 事件仅当鼠标直接进入目标元素时才触发。

mouseenter 鼠标事件

在这里插入图片描述

var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        father.addEventListener('mouseover', function() {
            console.log(11); //经过子盒子 父盒子都会触发
         father.addEventListener('mouseenter', function() {
            console.log(12); //经过父盒子才会触发