鼠標經過子元素觸發mouseout，mouseover事件的解決方案

2024-05-06 16:23:46

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了鼠標經過子元素觸發mouseout，mouseover事件的解決方案的相關資料,需要的朋友可以參考下

我想實現的目標：當鼠標進入黑色框時，橙色框執行淡入動畫;當黑色框范圍移動的時候(即使經過粉色框，動畫仍然不被觸發);當鼠標移出的時候，橙色方塊消失。

遇到的問題闡述：當鼠標移入黑色框的時候，橙色框執行淡入動畫，但是當鼠標從黑色框經過粉色框的時候，橙色框就消失了，然后又執行一遍淡入動畫。當鼠標從粉色框移出到黑色框的時候，橙色框的淡入動畫又被執行。這不是我想要的。

初期代碼：

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