鼠標(biāo)經(jīng)過子元素觸發(fā)mouseout,mouseover事件的解決方案
我想實(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)容了,希望大家能夠喜歡。
- 兼容ie和firefox的鼠標(biāo)經(jīng)過(onmouseover和onmouseout)實(shí)現(xiàn)--簡(jiǎn)短版
- javascript mouseover、mouseout停止事件冒泡的解決方案
- as3 rollOver or mouseOver使用說明
- 擴(kuò)展Jquery插件處理mouseover時(shí)內(nèi)部有子元素時(shí)發(fā)生樣式閃爍
- onmouseover和onmouseout的一些問題思考
- JS小功能(onmouseover實(shí)現(xiàn)選擇月份)實(shí)例代碼
- 經(jīng)過綁定元素時(shí)會(huì)多次觸發(fā)mouseover和mouseout事件
- jQuery中mouseover事件用法實(shí)例
- IE中鼠標(biāo)經(jīng)過option觸發(fā)mouseout的解決方法
相關(guān)文章
分享Bootstrap簡(jiǎn)單表格、表單、登錄頁(yè)面
本文給大家分享Bootstrap簡(jiǎn)單表格、表單、登錄頁(yè)面的實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-08-08js實(shí)現(xiàn)杯子倒水問題自動(dòng)求解程序
智力測(cè)試題經(jīng)常遇到類似的邏輯題,給幾個(gè)容量不等的杯子,讓你倒出多少的水,感興趣的朋友可以參考下哈希望可以幫助到你2013-03-03原生JavaScript+LESS實(shí)現(xiàn)瀑布流
這篇文章主要介紹了原生JavaScript+LESS實(shí)現(xiàn)瀑布流的方法,附上了具體實(shí)例,這里推薦給有需要的小伙伴。2014-12-12基于JavaScript實(shí)現(xiàn)數(shù)碼時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)數(shù)碼時(shí)鐘效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07微信小程序搜索框樣式并實(shí)現(xiàn)跳轉(zhuǎn)到搜索頁(yè)面(小程序搜索功能)
這篇文章主要介紹了微信小程序搜索框樣式并實(shí)現(xiàn)跳轉(zhuǎn)到搜索頁(yè)面(小程序搜索功能),需要的朋友可以參考下2020-03-03簡(jiǎn)單了解Javscript中兄弟ifream的方法調(diào)用
這篇文章主要介紹了簡(jiǎn)單了解Javscript中兄弟ifream的方法調(diào)用文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,,需要的朋友可以參考下2019-06-06ElementPlus?Tag標(biāo)簽用法小結(jié)
這篇文章主要介紹了ElementPlus?Tag標(biāo)簽用法,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09