關於mouseout與mouseleave的區別

    $("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>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章