mouseout和mouseleave的區(qū)別？
我看兩個(gè)事件都是鼠標(biāo)移出執(zhí)行什么什么操作啊，有什么不同啊？什么時(shí)候用哪個(gè)啊？
寶慕林2233867
2016-07-26
2 回答
舉報(bào)
0/150
提交
取消
2016-07-26
mouseout是冒泡的,mouseleave是不冒泡的?
在一個(gè)多層容器結(jié)構(gòu)中，如果只有你需要的那一層容器有綁移除事件，兩個(gè)沒有區(qū)別 ；如果多層綁有移除事件，前者有冒泡，結(jié)果是移出內(nèi)層（可能還沒有移出外層）觸發(fā)內(nèi)層的移除事件后，會(huì)冒泡到外層觸發(fā)外層的移除的事件。后者的話只會(huì)觸發(fā)內(nèi)層的移出事件不會(huì)冒泡到外層。
2016-07-26
<!doctype?html> <html> <head> <meta?charset="UTF-8"> <title>jQuery基礎(chǔ)修煉圣典—事件篇</title> <script?src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script> <style> li{ padding:?10px; margin-bottom:?4px; background:?rgba(0,0,255,.3); } li?span{display:none;background:?yellow} </style> </head> <body> <ul> <li>只有開被選<span>span</span></li> <li>在鼠標(biāo)指針離<span>span</span></li> <li>元素時(shí)，才<span>span</span></li> <li>會(huì)觸發(fā)?mous<span>span</span></li> <li>eleave?事件。<span>span</span></li> </ul> <script> $(function(){ $("li").each(function(i)?{ ???//刪除的鼠標(biāo)劃過的顯示與隱藏 ???$(this).mouseover(function()?{ ???????$(this).find(".del").fadeIn(100); ???}) ???$(this).mouseout(function()?{ ???????$(this).find(".del").fadeOut(100); ???}) }) }) </script> </body> </html>以上一個(gè)例子,你可以修改mouseout為mouseleave看看
當(dāng)為mouseout的時(shí)候，你會(huì)發(fā)現(xiàn)在li內(nèi)部鼠標(biāo)移到.del的時(shí)候.del會(huì)閃動(dòng)，那是因?yàn)槟憧赡茈x開了該DIV的子元素，所以會(huì)出發(fā)mouseout事件。而mouseleave沒有這個(gè)問題。
具體mouseleave和mouseout兩者之間的區(qū)別主要有以下兩點(diǎn)：
1.不論鼠標(biāo)指針離開被選元素還是任何子元素，都會(huì)觸發(fā) mouseout 事件。
2.只有在鼠標(biāo)指針離開被選元素時(shí)，才會(huì)觸發(fā) mouseleave 事件。