jQuery因mouseover,mouseout冒泡產生的閃爍問題
阿新 • • 發佈:2019-01-10
由於瀏覽器的冒泡行為。造成如果在一個DIV元素上同時定義了mouseover,mouseout的時候,當滑鼠移動到DIV中的child子元素的時候,就會同時執行了兩個操作mouseover和mouseout。
解決方案:阻止冒泡行為,當執行mouseover的時候不觸發mouseout的操作。
方法1:
延遲執行(setTimeout)、取消延遲(clearTimeout),就是當mouseout的時候延遲執行,而在mouseover的時候取消延遲執行。當滑鼠在DIV上邊移動的時候因為延遲的執行所以mouseout一直都不會被觸發。
$('div').mouseout(function(){ clearTimeout(t); t=setTimeout(zoomIn,400); }).mouseover(function(){ if(t!=null)clearTimeout(t); t=null; } );
方法2:jquery(需要版本號大於1.2.2)
mouseenter和mouseleave事件IE特有的函式,使用jquery就很好的解決了相容問題。函式的原理當第一次滑鼠進入節點區域時觸發,以後在節點區域內(子節點間)移動時不觸發。
$('div').bind("mouseenter",function(){
// do something on mouseenter
});
$('div').bind("mouseleave",function(){
// do something on mouseleaver
});
jquery版本 >1.4簡化寫法:
$('div').bind({ mouseenter:function(){ // do something on mouseenter }, mouseleaver:function(){ // do something on mouseleaver } })