不論滑鼠指標穿過被選元素或其子項目,都會觸發 mouseover 事件。對應mouseout
只有在滑鼠指標穿過被選元素時,才會觸發 mouseenter 事件。對應mouseleave
這樣的話,mouseenter子項目不會反覆觸發事件,否則在IE中經常有閃爍情況發生。
<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); });});</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>