這篇文章主要為大家展示了“jQuery中鼠標(biāo)移出事件的示例分析”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“jQuery中鼠標(biāo)移出事件的示例分析”這篇文章吧。
創(chuàng)新互聯(lián)是專業(yè)的銅陵網(wǎng)站建設(shè)公司,銅陵接單;提供做網(wǎng)站、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行銅陵網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
一個(gè)mouseout事件引發(fā)的問題
1. 遇到的問題
最近上課做一個(gè)效果,顯示一個(gè)模擬QQ好友列表,默認(rèn)是隱藏的,鼠標(biāo)移動(dòng)到瀏覽器右邊界的時(shí)候顯示,離開好友列表框的時(shí)候隱藏。
代碼如下:
Insert title here #friends{ border:1px solid #ff0000; width:200px; height:400px; position:absolute; right:0px; top:20px; background: #abcdef; display:none } #line{ width:1px; height:800px; float:right; } var inter; jQuery(function(){ /*鼠標(biāo)移動(dòng)到右邊界線,好友列表框顯示*/ ("#line").mouseover(function(){ $("#friends").show(1000); }); /*鼠標(biāo)離開好友框,隱藏*/ ("#friends").bind('mouseout',function(event){ $(this).hide(1000); }); });
<p style="height:25px"><span>會(huì)飛的魚</span><img style="width:18px;height:18px;" src="images/boy.png"/></p> <p style="height:25px"><span>會(huì)飛的魚</span><img style="width:18px;height:18px;" src="images/boy.png"/></p> <p style="height:25px"><span>會(huì)飛的魚</span><img style="width:18px;height:18px;" src="images/boy.png"/></p> <p style="height:25px"><span>會(huì)飛的魚</span><img style="width:18px;height:18px;" src="images/boy.png"/></p>
<p id="line"></p>
運(yùn)行界面:
上面的mouseout事件出了問題,鼠標(biāo)移動(dòng)到右邊界顯示好友框沒問題,當(dāng)移動(dòng)到好友昵稱上面時(shí)候好友框消失了,這是為何?
原因是好友框內(nèi)有好多子元素p,每個(gè)p對(duì)應(yīng)一個(gè)好友。此時(shí)鼠標(biāo)移動(dòng)到子元素上面觸發(fā)了父元素的mouseout事件。更為糟糕的是子元素p里面還有span,image子元素,這樣就會(huì)觸發(fā)子元素p的mouseout,繼而冒泡到最外層的好友列表的p。
2. 如何解決
方法一:
思路:判斷當(dāng)前鼠標(biāo)指向的元素是否是其子元素,如果是子元素就不隱藏,直接return,否則,隱藏好友列表。
給好友列表p注冊(cè)mouseout代碼:
/鼠標(biāo)離開好友框,隱藏/ (“#friends”).bind(‘mouseout’,function(event){ var tar=event.target || event.srcElement;//鼠標(biāo)離開的元素 var totar=event.relatedTarget || event.toElement;//鼠標(biāo)指向的元素 //如果鼠標(biāo)指向了自己的子元素,則不觸發(fā)mouseout事件 if( (this).find(totar).size()>0||this==totar){ return; } //否則,如果不是指向子元素,就表示鼠標(biāo)已經(jīng)離開了p else { console.log(tar.id+’–’+totar.id); $(this).hide(1000); } });
說明:
在發(fā)生mouseover和mouseout事件時(shí),還會(huì)涉及更多的元素。這兩個(gè)事件都會(huì)涉及把鼠標(biāo)指針從一個(gè)元素的邊界之內(nèi)移到另一個(gè)元素邊界之內(nèi)。對(duì)mouseover事件而言,事件的主目標(biāo)是獲得光標(biāo)的元素,而相關(guān)元素就是那個(gè)失去光標(biāo)的元素。類似地,對(duì)mouseout事件而言,事件的主目標(biāo)是失去光標(biāo)的元素,而相關(guān)元素則是獲得光標(biāo)的元素。
DOM通過event對(duì)象的relatedTarget屬性提供了相關(guān)元素的信息。這個(gè)屬性只對(duì)于mouseover和mouseout事件才包含值;對(duì)于其他事件,這個(gè)屬性的值是null。IE不支持realtedTarget屬性,但提供了保存著同樣信息的不同屬性。在mouseover事件觸發(fā)時(shí),IE的fromElement屬性中保存了相關(guān)元素;在mouseout事件出發(fā)時(shí),IE的toElement屬性中保存著相關(guān)元素。
以上代碼為兼容不同瀏覽器的寫法。如果覺得第一種方法麻煩,可以參照以下方法。
方法二:
思路:給p注冊(cè)mouseleave事件,該事件和mouseout區(qū)別就在于,當(dāng)鼠標(biāo)移動(dòng)到本元素內(nèi)的子元素的時(shí)候不會(huì)觸發(fā)mouseleave,只有真正離開了這個(gè)元素才能觸發(fā),而且不支持冒泡。
代碼:
/鼠標(biāo)離開好友框,隱藏/ (“#friends”).bind(‘mouseleave’,function(event){ (this).hide(1000); } );
代碼一下子精簡(jiǎn)了好多。運(yùn)行結(jié)果是一樣的。
說明:
mouseover與mouseenter
不論鼠標(biāo)指針穿過被選元素或其子元素,都會(huì)觸發(fā) mouseover 事件。
只有在鼠標(biāo)指針穿過被選元素時(shí),才會(huì)觸發(fā) mouseenter 事件。
mouseout與mouseleave
不論鼠標(biāo)指針離開被選元素還是任何子元素,都會(huì)觸發(fā) mouseout 事件。
只有在鼠標(biāo)指針離開被選元素時(shí),才會(huì)觸發(fā) mouseleave 事件。
官方解釋:
M啊啊DN這段解釋說只有IE瀏覽器支持mouseleave和mouseenter事件,其他瀏覽器暫不支持,火狐其實(shí)是支持的,chrome和Safari等瀏覽器未測(cè)試。但我們?nèi)绻胘Query注冊(cè)mouseenter和mouseleave函數(shù),可以支持常見的所有瀏覽器(均已測(cè)試),因?yàn)閖Query內(nèi)部做了封裝。寫法見上面代碼。
3.小結(jié)
如果給元素注冊(cè)鼠標(biāo)覆蓋和離開事件,分兩種情況:
1.如果所選元素內(nèi)沒有子元素影響,可以考慮直接用mouseover和mouseout。
2.如果有子元素影響(含有子元素),可以采用mouseenter和mouseleave,防止事件冒泡。
以上是“jQuery中鼠標(biāo)移出事件的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
分享文章:jQuery中鼠標(biāo)移出事件的示例分析
本文地址:http://chinadenli.net/article32/ppsepc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站營(yíng)銷、網(wǎng)站排名、網(wǎng)站建設(shè)、搜索引擎優(yōu)化、關(guān)鍵詞優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)