欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

鼠標(biāo)經(jīng)過子元素觸發(fā)mouseout,mouseover事件的解決方案

 更新時(shí)間:2015年07月26日 10:08:59   投稿:hebedich  
這篇文章主要介紹了鼠標(biāo)經(jīng)過子元素觸發(fā)mouseout,mouseover事件的解決方案的相關(guān)資料,需要的朋友可以參考下

我想實(shí)現(xiàn)的目標(biāo):當(dāng)鼠標(biāo)進(jìn)入黑色框時(shí),橙色框執(zhí)行淡入動(dòng)畫;當(dāng)黑色框范圍移動(dòng)的時(shí)候(即使經(jīng)過粉色框,動(dòng)畫仍然不被觸發(fā));當(dāng)鼠標(biāo)移出的時(shí)候,橙色方塊消失。

遇到的問題闡述:當(dāng)鼠標(biāo)移入黑色框的時(shí)候,橙色框執(zhí)行淡入動(dòng)畫,但是當(dāng)鼠標(biāo)從黑色框經(jīng)過粉色框的時(shí)候,橙色框就消失了,然后又執(zhí)行一遍淡入動(dòng)畫。當(dāng)鼠標(biāo)從粉色框移出到黑色框的時(shí)候,橙色框的淡入動(dòng)畫又被執(zhí)行。這不是我想要的。

初期代碼:

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

首先我們解釋一下原因,為什么會(huì)出現(xiàn)這些問題。

當(dāng)鼠標(biāo)從黑色框移到粉色框的時(shí)候,此時(shí)黑色框的mouseout的被觸發(fā),又由于事件冒泡,黑色框的mouseover事件隨即被觸發(fā),所以實(shí)際上,橙色框先消失,然后立即執(zhí)行淡入動(dòng)畫。這也就是我們看到的過程。

當(dāng)鼠標(biāo)從粉色框移到黑色框的時(shí)候,此時(shí)黑色框的mouseout又被觸發(fā)(因?yàn)椴徽撌髽?biāo)穿過被選元素或其子元素,都觸發(fā) mouseover 事件),同時(shí)mouseover也被觸發(fā),所以又出現(xiàn)了再次執(zhí)行淡入效果的過程。

方法一:用mouseleave/mouseout代替mouseover/mouseout【最佳方法】

先看一下mouseout&mouseover與mouseleave&mouseenter用法上的區(qū)別

mouseover與mouseenter

不論鼠標(biāo)指針穿過被選元素或其子元素,都會(huì)觸發(fā) mouseover 事件。
只有在鼠標(biāo)指針從元素外穿入被選元素(到元素內(nèi))時(shí),才會(huì)觸發(fā) mouseenter 事件。

mouseout與mouseleave

不論鼠標(biāo)指針離開被選元素還是任何子元素,都會(huì)觸發(fā) mouseout 事件。
只有在鼠標(biāo)指針從元素內(nèi)穿出被選元素(到元素外)時(shí),才會(huì)觸發(fā) mouseleave 事件。

可以看一個(gè)簡(jiǎn)單的例子看看二者的區(qū)別

所以改進(jìn)的代碼可以為

<!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()阻止事件進(jìn)一步傳播

e.stopPropagation()會(huì)終止事件在傳播過程的捕獲、目標(biāo)處理或起泡階段進(jìn)一步傳播。調(diào)用該方法后,該節(jié)點(diǎn)上處理該事件的處理程序?qū)⒈徽{(diào)用,事件不再被分派到其他節(jié)點(diǎn)。

<!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');
  //這是保證動(dòng)畫體的末狀態(tài)不變
 });
 $('.child').on('mouseout',function(e){
  e.stopPropagation();
  //防止從粉色框移出到黑色框時(shí)再次觸發(fā)其他事件
 })
 </script>
</body>
</html>

拓展思考:

1.如果子元素過多怎么辦,難道每個(gè)都要去綁定e.stopPropagation()?

用jquery的一個(gè)選擇器.children(),比如$('.parent').children()。獲得匹配元素集合中每個(gè)元素的子元素。

以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。

相關(guān)文章

最新評(píng)論