滑鼠經過子元素觸發mouseout，mouseover事件的解決方案_javascript技巧
- WBOY原創
- 2016-05-16 15:49:061401瀏覽
我想實現的目標：當滑鼠進入黑色框時，橘色框執行淡入動畫；當黑色框範圍移動的時候（即使經過粉紅色框，動畫仍然不被觸發）；當滑鼠移出的時候，橘色方塊消失。
遇到的問題闡述：當滑鼠移入黑色框的時候，橘色框執行淡入動畫，但是當滑鼠從黑色框經過粉紅色框的時候，橘色框就消失了，然後又執行一遍淡入動畫。當滑鼠從粉紅色框移出到黑色框的時候，橘色框的淡入動畫又被執行。這不是我想要的。
初期代碼：
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<meta charset="utf-8">
<title>mouseover mouseout</title>
<style type="text/css" media="screen">
.parent{
width:200px;
height:200px;
background:black;
}
.child{
width:100px;
height:100px;
background:pink;
}
.a1{
width:40px;
height:40px;
background:orange;
display:none;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="a1"></div>
</div>
<script>
$('.parent').on('mouseover',function(e){
$('.a1').show(1000);
});
$('.parent').on('mouseout',function(e){
$('.a1').css('display','none');
});
</script>
</body>
</html>
首先我們解釋一下原因，為什麼會出現這些問題。
當滑鼠從黑色框移到粉紅色框的時候，此時黑色框的mouseout的被觸發，又由於事件冒泡，黑色框的mouseover事件隨即被觸發，所以實際上，橙色框先消失，然後立即執行淡入動畫。這也就是我們看到的過程。
當滑鼠從粉紅色框移到黑色框的時候，此時黑色框的mouseout又被觸發（因為不論滑鼠穿過被選元素或其子元素，都觸發mouseover 事件），同時mouseover也被觸發，所以又出現了再次執行淡入效果的過程。
方法一：用mouseleave/mouseout取代mouseover/mouseout【最佳方法】
先看mouseout&mouseover與mouseleave&mouseenter用法上的差別
mouseover與mouseenter
不論滑鼠指標穿過被選元素或其子元素，都會觸發 mouseover 事件。
只有在滑鼠指標從元素外穿入被選元素（到元素內）時，才會觸發 mouseenter 事件。
mouseout與mouseleave
不論滑鼠指標離開被選元素還是任何子元素，都會觸發 mouseout 事件。
只有在滑鼠指標從元素內穿出被選元素（到元素外）時，才會觸發 mouseleave 事件。
可以看一個簡單的例子看看二者的差別
所以改進的程式碼可以是
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<meta charset="utf-8">
<title>mouseover mouseout</title>
<style type="text/css" media="screen">
.parent{
width:200px;
height:200px;
background:black;
}
.child{
width:100px;
height:100px;
background:pink;
}
.a1{
width:40px;
height:40px;
background:orange;
display:none;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="a1"></div>
</div>
<script>
$('.parent').on('mouseenter',function(e){
$('.a1').show(1000);
});
$('.parent').on('mouseleave',function(e){
$('.a1').css('display','none');
});
</script>
</body>
</html>
方法二：利用e.stopPropagation()阻止事件進一步傳播
e.stopPropagation()會終止事件在傳播過程的捕獲、目標處理或起泡階段進一步傳播。呼叫該方法後，該節點上處理該事件的處理程序將被調用，事件不再被分派到其他節點。
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<meta charset="utf-8">
<title>mouseover mouseout</title>
<style type="text/css" media="screen">
.parent{
width:200px;
height:200px;
background:black;
}
.child{
width:100px;
height:100px;
background:pink;
}
.a1{
width:40px;
height:40px;
background:orange;
display:none;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="a1"></div>
</div>
<script>
$('.parent').on('mouseover',function(e){
$('.a1').show(1000);
});
$('.parent').on('mouseout',function(e){
$('.a1').css('display','none');
});
$('.child').on('mouseover',function(e){
e.stopPropagation();
$('.a1').css('display','block');
//这是保证动画体的末状态不变
});
$('.child').on('mouseout',function(e){
e.stopPropagation();
//防止从粉色框移出到黑色框时再次触发其他事件
})
</script>
</body>
</html>
拓展思考：
1.如果子元素太多怎麼辦，難道每個都要去綁定e.stopPropagation()?
用jquery的一個選擇器.children()，例如$('.parent').children()。獲得匹配元素集合中每個元素的子元素。
以上所述就是本文的全部內容了，希望大家能夠喜歡。