chrome瀏覽器中js模擬mouseenter事件

寫在前面的廢話

　　之前寫監聽鼠標進入事件的時候，總是很隨意地用mouseenter來實現。今天在別人電腦上作測試的時候，才發現原來chrome瀏覽器不支持這個事件，后來翻閱了一下js高級程序設計，上面寫的IE, Firefox9, Opera才支持這個事件，由於firefox9以下的用戶可以忽略不計，所以可以理解為除了chrome其他瀏覽器都支持這個事件，可是我的chrome卻用的好好的。

兼容性分析

　　我的chrome是開發者版（版本號已經是30了），已經支持了這個事件，現在可以知道的就是目前chrome28穩定版及之前版本還沒支持這個事件。下面說說怎么在chrome瀏覽器實現這兩個事件吧。

mouseover與mouseenter之區別

　　在實現這兩個事件之前，首先咱分析一下mouseenter和mouseover的區別：兩個都是當鼠標從元素外部移動到元素范圍內時觸發，不同的是mouseenter事件不冒泡，這樣帶來的效果就是鼠標移動到后代元素上不會觸發這個元素的mouseenter事件，這樣一方面可以避免事件冒泡帶來的麻煩，另一方面也丟失了事件冒泡的優勢比如借助事件冒泡實現事件委托以優化網頁性能， 而mouseover事件恰好相反。

方法原理分析

　　好了，區別我們分析清楚了，那么我們就有辦法用mouseover事件來模擬mouseenter了，那就是當事件的相關源是它的子元素也就是事件是在元素內部觸發的時候不執行函數就是了，怎么樣，是不是很簡單。下面具體說說方法。

相關概念

　　剛才有提到一個相關源的概念。在mouseover和mouseout發生時，還會涉及更多元素，這兩個事件都是將鼠標從一個元素邊界移到另一個元素邊界，對mouseover事件而言，事件的主目標就是鼠標移入的元素，相關目標就是失去鼠標的元素，而這個相關元素保存在event對象的relatedTarget屬性里（IE8以前的版本是另外的屬性，自查）。接下來可以寫一個獲取相關元素和一個判斷包含關系的函數。

實現

var o_o = {
    //在這個對象里面定義了add_event, get_event, get_target函數對事件綁定、獲取事件、獲取事件源做兼容性處理，代碼省略
    get_related_target: function(event){
        return event.relatedTarget || event.toElement || event.fromElement;
    },
    
    contains: function(parent, child){
        while(child){
            if(child.parentNode === parent){
                return true;
            }
            child = child.parentNode;
        }
        return false;
    }
}

　　借助這兩個函數我們就可以開始實現我們的方法了。

//這里以mouseover為例，mouseout同理
o_o.add_event(elem, "mouseover", function(event){

    event = o_o.get_event(event);
    var related_elem = o_o.get_related_target(event);
    if(o_o.contains(elem, related_elem){
　　　　//執行綁定函數
　　}
});

　　上面的代碼就是對mouseenter的模擬了，mouseleave的模擬同理，在此不作贅述。

　　

---

寫在后面

最后祝大家情人節快樂，別人都急着寫情書表白呢，而我卻在寫博客，哈哈。

剛開始寫博客，文章中如有錯誤地方，歡迎批評！