mouseover 事件和mouseenter 事件的不同

最新推荐文章于 2025-05-14 14:39:29 发布

wy_Blog

最新推荐文章于 2025-05-14 14:39:29 发布

阅读量807

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/wy_Blog/article/details/57082281

jQuery 专栏收录该内容

8 篇文章

订阅专栏

本文探讨了jQuery中mouseover与mouseenter事件的区别。mouseover事件会在鼠标指针进入元素或其子元素时触发，而mouseenter仅在鼠标指针直接进入被选元素时触发。通过示例演示了两种事件的不同之处。

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

mouseover 事件：不论鼠标指针进入被选元素或其子元素，都会触发 mouseover 事件。对应mouseout

$("p").mouseover(function(){
  $("p").css("background-color","yellow");
});

mouseenter 事件：只有在鼠标指针进入被选元素时，才会触发 mouseenter 事件。对应mouseleave

$("p").mouseenter(function(){
  $("p").css("background-color","yellow");
});

两者的不同：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。请看下面例子的演示。

<html>
<head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    x = 0;
    y = 0;
    $(document).ready(function() {
        $("div.over").mouseover(function() {
            $(".over span").text(x += 1);
        });
        $("div.enter").mouseenter(function() {
            $(".enter span").text(y += 1);
        });
    });A
    </script>
</head>
<body>
    <p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
    <p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
    <div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
        <h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
    </div>
    <div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
        <h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
    </div>
</body>
</html>