js事件冒泡問題

來源:互聯網
上載者:User

        在IE下解決問題很簡單,用onMouseEnter、onMouseLeave來代替onMouseOver、onMouseOut就行了,他們的作用基本相同,前者不會發生冒泡。但是firefox下沒有這兩個事件,如果用jQuery的event事件,只要bind
mouseleave和mouseenter即可。如果是純js實現,只能這麼做:

通過判斷觸發onMouseOut事件後滑鼠到達的元素是不是包含在父元素(資訊列Div)內,如果是就表示滑鼠還在資訊列上,則不隱藏,如果否就表示滑鼠真的移出了資訊列,那麼資訊列隱藏,思路有了,那麼就一步步來解決問題

首先來擷取觸發onMouseOut事件的元素,IE下event的屬性toElement來獲得,在firefox下變成了relatedTarget(很是折騰!)
IE:event.toElement   
Firefox:event.relatedTarget(注意Firefox下event須要調用函數時傳入)

接下來就是判斷擷取的元素是否是子項目,IE下通過元素的contains(Element)方法可以判斷,同樣的firefox下沒有這個方法!!,不過可以給firefox下的元素定義contains()方法來解決問題,代碼如下:

if(typeof(HTMLElement)!="undefined")   
//給firefox定義contains()方法,ie下不起作用
{   
      HTMLElement.prototype.contains=function(obj)   
      {   
          while(obj!=null&&typeof(obj.tagName)!="undefind"){ //通過迴圈對比來判斷是不是obj的父元素
       if(obj==this) return true;   
       obj=obj.parentNode;
     }   
          return false;   
      };   
}  

擷取和判斷搞定後,我們就可以通過判斷IE和Firefox來針對處理了,通過navigator.userAgent來判斷瀏覽器:
  
if(navigator.userAgent.indexOf("MSIE")>0) { 
        return "MSIE"; 
   } 
   if(navigator.userAgent.indexOf("Firefox")>0){ 
        return "Firefox"; 
   } 

到此為止所有要解決的問題都得到瞭解決,當觸發onMouseOut事件時我們針對不同的瀏覽器先擷取滑鼠到達的元素,然後通過判斷該元素是否在資訊列(div)內,如果元素是子項目,那麼不執行onMouseOut事件,反之則執行事件,隱藏資訊列,完成後的代碼如下:
function
hideMsgBox(theEvent){ //theEvent用來傳入事件,Firefox的方式
        if (theEvent){
               var browser=navigator.userAgent;   //取得瀏覽器屬性
               if (browser.indexOf("Firefox")>0){ //如果是Firefox
                    if (document.getElementById('MsgBox').contains(theEvent.relatedTarget)) { //如果是子項目
                        return;   //結束函式
                        } 
                } 
                  if (browser.indexOf("MSIE")>0){ //如果是IE
                          if (document.getElementById('MsgBox').contains(event.toElement)) { //如果是子項目
                                return; //結束函式
                           }
                 }
             }
            /*要執行的操作*/
}

在資訊列(Div)上設定onMouseOut=hideMsgBox(event)來調用,圓滿解決冒泡問題。
事實上通過設定
window.event.cancelBubble
= true (IE) event.stopPropagation()
event.preventDefault() (Firefox)
也可以解決問題,但是需要遍曆所有子項目,影響效率,所以還是在觸發onMouseOut事件時再進行上述判斷分別處理比較合適。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.