mouseout() 方法和mouseleave() 方法的不同

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

原创最新推荐文章于 2024-09-12 16:31:59 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

8 篇文章

订阅专栏

本文详细解释了在jQuery中mouseout和mouseleave事件的区别。通过实例演示，读者可以了解到这两个事件触发条件的不同之处，mouseout会在鼠标离开目标元素及其子元素时触发，而mouseleave仅在鼠标离开目标元素本身时触发。

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

mouseout() 方法：当鼠标从备选元素上和子元素移开时触发对应： mouseover 事件

//鼠标移开变颜色
$("p").mouseout(function(){
  $("p").css("background-color","#E9E9E4");
});

mouseleave() 方法： 当鼠标指针离开元素时触发对应： mouseover 事件

$("p").mouseleave(function(){
  $("p").css("background-color","#E9E9E4");
});

两者的不同：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。请看下面例子的演示。

<html>
<head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    x = 0;
    y = 0;
    $(document).ready(function() {
        $("div.out").mouseout(function() {
            $(".out span").text(x += 1);
        });
        $("div.leave").mouseleave(function() {
            $(".leave span").text(y += 1);
        });
    });
    </script>
</head>

<body>
    <p>不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。</p>
    <p>只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。</p>
    <div class="out" style="background-color:lightgray;padding:20px;width:40%;float:left">
        <h2 style="background-color:white;">被触发的 Mouseout 事件：<span></span></h2>
    </div>
    <div class="leave" style="background-color:lightgray;padding:20px;width:40%;float:right">
        <h2 style="background-color:white;">被触发的 Mouseleave 事件：<span></span></h2>
    </div>
</body>
</html>