关于mouseout与mouseleave的区别

来源：互联网发布：森马价格知乎编辑：程序博客网时间：2024/06/05 06:16

    $("li").each(function(i) {                        //删除的鼠标划过的显示与隐藏                  $(this).mouseover(function() {                      $(this).find(".del").fadeIn(10);                  })                  $(this).mouseleave(function() {                      $(this).find(".del").fadeOut(10);                  })              })

上面的代码中如果不是用的mouseleave而是mouseout的话你会发现尚未离开类名的.del这个DIV这个DIV有时候就会闪动。那是因为你可能离开了该DIV的子元素，所以会出发mouseout事件。具体mouseleave和mouseout两者之间的区别主要有以下两点：

1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

下面是w3c上的例子很便于大家理解

<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>

1 0