jQuery中鼠標移出事件的示例分析

這篇文章主要為大家展示了“jQuery中鼠標移出事件的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“jQuery中鼠標移出事件的示例分析”這篇文章吧。

一個mouseout事件引發的問題
1.  遇到的問題
最近上課做一個效果，顯示一個模擬QQ好友列表，默認是隱藏的，鼠標移動到瀏覽器右邊界的時候顯示，離開好友列表框的時候隱藏。

代碼如下：

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(){
        /*鼠標移動到右邊界線，好友列表框顯示*/         ("#line").mouseover(function(){             $("#friends").show(1000);         });        /*鼠標離開好友框，隱藏*/
("#friends").bind('mouseout',function(event){
              $(this).hide(1000);  
         });  
    });

好友列表

   <p style="height:25px"><span>會飛的魚</span><img style="width:18px;height:18px;"  src="images/boy.png"/></p>
   <p style="height:25px"><span>會飛的魚</span><img style="width:18px;height:18px;"  src="images/boy.png"/></p>
   <p style="height:25px"><span>會飛的魚</span><img style="width:18px;height:18px;"  src="images/boy.png"/></p>
   <p style="height:25px"><span>會飛的魚</span><img style="width:18px;height:18px;"  src="images/boy.png"/></p>

<p id="line"></p>

運行界面：

上面的mouseout事件出了問題，鼠標移動到右邊界顯示好友框沒問題，當移動到好友昵稱上面時候好友框消失了，這是為何？
原因是好友框內有好多子元素p，每個p對應一個好友。此時鼠標移動到子元素上面觸發了父元素的mouseout事件。更為糟糕的是子元素p里面還有span，image子元素，這樣就會觸發子元素p的mouseout，繼而冒泡到最外層的好友列表的p。
2.  如何解決
方法一：
思路：判斷當前鼠標指向的元素是否是其子元素，如果是子元素就不隱藏，直接return，否則，隱藏好友列表。

給好友列表p注冊mouseout代碼：

/鼠標離開好友框，隱藏/ (“#friends”).bind(‘mouseout’,function(event){               var tar=event.target || event.srcElement;//鼠標離開的元素               var totar=event.relatedTarget || event.toElement;//鼠標指向的元素               //如果鼠標指向了自己的子元素，則不觸發mouseout事件              if(
(this).find(totar).size()>0||this==totar){ 
                return; 
            } 
            //否則，如果不是指向子元素，就表示鼠標已經離開了p 
            else  { 
                console.log(tar.id+’–’+totar.id); 
                $(this).hide(1000);  
            } 
         });

說明：
在發生mouseover和mouseout事件時，還會涉及更多的元素。這兩個事件都會涉及把鼠標指針從一個元素的邊界之內移到另一個元素邊界之內。對mouseover事件而言，事件的主目標是獲得光標的元素，而相關元素就是那個失去光標的元素。類似地，對mouseout事件而言，事件的主目標是失去光標的元素，而相關元素則是獲得光標的元素。
DOM通過event對象的relatedTarget屬性提供了相關元素的信息。這個屬性只對于mouseover和mouseout事件才包含值；對于其他事件，這個屬性的值是null。IE不支持realtedTarget屬性，但提供了保存著同樣信息的不同屬性。在mouseover事件觸發時，IE的fromElement屬性中保存了相關元素；在mouseout事件出發時，IE的toElement屬性中保存著相關元素。
以上代碼為兼容不同瀏覽器的寫法。如果覺得第一種方法麻煩，可以參照以下方法。

方法二：
思路：給p注冊mouseleave事件，該事件和mouseout區別就在于，當鼠標移動到本元素內的子元素的時候不會觸發mouseleave，只有真正離開了這個元素才能觸發，而且不支持冒泡。

代碼：

/鼠標離開好友框，隱藏/ (“#friends”).bind(‘mouseleave’,function(event){
(this).hide(1000);  
            } 
         );

代碼一下子精簡了好多。運行結果是一樣的。

說明：
mouseover與mouseenter
不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。

只有在鼠標指針穿過被選元素時，才會觸發 mouseenter 事件。

mouseout與mouseleave

不論鼠標指針離開被選元素還是任何子元素，都會觸發 mouseout 事件。

只有在鼠標指針離開被選元素時，才會觸發 mouseleave 事件。
官方解釋：

M啊啊DN這段解釋說只有IE瀏覽器支持mouseleave和mouseenter事件，其他瀏覽器暫不支持，火狐其實是支持的，chrome和Safari等瀏覽器未測試。但我們如果用jQuery注冊mouseenter和mouseleave函數，可以支持常見的所有瀏覽器（均已測試），因為jQuery內部做了封裝。寫法見上面代碼。  
3．小結
如果給元素注冊鼠標覆蓋和離開事件，分兩種情況：
1.如果所選元素內沒有子元素影響，可以考慮直接用mouseover和mouseout。  
2.如果有子元素影響(含有子元素)，可以采用mouseenter和mouseleave，防止事件冒泡。

以上是“jQuery中鼠標移出事件的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！