課程
/前端開發
/jQuery
/jQuery基礎(三)—事件篇
我看兩個事件都是鼠標移出執行什么什么操作啊，有什么不同??？什么時候用哪個?。?/p>
2016-07-26
源自：jQuery基礎(三)—事件篇 2-5
正在回答
mouseout是冒泡的,mouseleave是不冒泡的?
在一個多層容器結構中，如果只有你需要的那一層容器有綁移除事件，兩個沒有區別 ；如果多層綁有移除事件，前者有冒泡，結果是移出內層（可能還沒有移出外層）觸發內層的移除事件后，會冒泡到外層觸發外層的移除的事件。后者的話只會觸發內層的移出事件不會冒泡到外層。
寶慕林2233867 提問者
<!doctype?html> <html> <head> <meta?charset="UTF-8"> <title>jQuery基礎修煉圣典—事件篇</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>在鼠標指針離<span>span</span></li> <li>元素時，才<span>span</span></li> <li>會觸發?mous<span>span</span></li> <li>eleave?事件。<span>span</span></li> </ul> <script> $(function(){ $("li").each(function(i)?{ ???//刪除的鼠標劃過的顯示與隱藏 ???$(this).mouseover(function()?{ ???????$(this).find(".del").fadeIn(100); ???}) ???$(this).mouseout(function()?{ ???????$(this).find(".del").fadeOut(100); ???}) }) }) </script> </body> </html>
以上一個例子,你可以修改mouseout為mouseleave看看
當為mouseout的時候，你會發現在li內部鼠標移到.del的時候.del會閃動，那是因為你可能離開了該DIV的子元素，所以會出發mouseout事件。而mouseleave沒有這個問題。
具體mouseleave和mouseout兩者之間的區別主要有以下兩點：
1.不論鼠標指針離開被選元素還是任何子元素，都會觸發 mouseout 事件。
2.只有在鼠標指針離開被選元素時，才會觸發 mouseleave 事件。
weibo_賴嘰寶_0
舉報
jQuery第三階段開啟事件修煉，掌握對頁面進行交互的操作
4 回答keydown和keypress的區別
2 回答mouseover()和mouseenter()的區別
3 回答this和e.target的區別
2 回答text()和textContent的區別
3 回答this和event.target。的區別
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-07-26
mouseout是冒泡的,mouseleave是不冒泡的?
在一個多層容器結構中，如果只有你需要的那一層容器有綁移除事件，兩個沒有區別 ；如果多層綁有移除事件，前者有冒泡，結果是移出內層（可能還沒有移出外層）觸發內層的移除事件后，會冒泡到外層觸發外層的移除的事件。后者的話只會觸發內層的移出事件不會冒泡到外層。
2016-07-26
<!doctype?html> <html> <head> <meta?charset="UTF-8"> <title>jQuery基礎修煉圣典—事件篇</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>在鼠標指針離<span>span</span></li> <li>元素時，才<span>span</span></li> <li>會觸發?mous<span>span</span></li> <li>eleave?事件。<span>span</span></li> </ul> <script> $(function(){ $("li").each(function(i)?{ ???//刪除的鼠標劃過的顯示與隱藏 ???$(this).mouseover(function()?{ ???????$(this).find(".del").fadeIn(100); ???}) ???$(this).mouseout(function()?{ ???????$(this).find(".del").fadeOut(100); ???}) }) }) </script> </body> </html>以上一個例子,你可以修改mouseout為mouseleave看看
當為mouseout的時候，你會發現在li內部鼠標移到.del的時候.del會閃動，那是因為你可能離開了該DIV的子元素，所以會出發mouseout事件。而mouseleave沒有這個問題。
具體mouseleave和mouseout兩者之間的區別主要有以下兩點：
1.不論鼠標指針離開被選元素還是任何子元素，都會觸發 mouseout 事件。
2.只有在鼠標指針離開被選元素時，才會觸發 mouseleave 事件。