欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

jQuery中鼠標(biāo)移出事件的示例分析

這篇文章主要為大家展示了“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)行界面:
jQuery中鼠標(biāo)移出事件的示例分析
上面的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 事件。
官方解釋:
jQuery中鼠標(biāo)移出事件的示例分析
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)

搜索引擎優(yōu)化