[javascript]mouseenter/mouseleave

 

　　事件委託的概念大家都很清楚，如果在某個元素上使用mouseover/mouseout的話，很有可能就被動的委託了這個事件。該元素中的子項目都會觸發mouseover/mouseout 而且無法通過停止冒泡來處理這個煩人的意外情況。

　　在ie上有兩個非常好的事件,mouseenter/mouseleave他們不會冒泡,當然不會產生這個問題。新版本的ff10 opera11都有支援這個事件。遺憾的是chrome19還沒有支援。 流行的類庫比如jquery已經支援這個事件了。對於不支援這兩個事件的瀏覽器必須自己處理了。

　　通過處理mouseover/mouseout也可以達到mouseenter/mouseleave同樣的目的。這個關鍵點在於我們判斷mouseover/mouseout元素和事件監聽的元素的關係，如果是內含項目關聯性就不執行操作。

我們通過事件函數得到event對象，通過event的相關屬性來確定元素的關係。

 

elem.onmouseover=function(e){      var e=window.event || e, target= e.currentTarget,related= e.relatedTarget || e.fromElement;}

　　用currentTarget可以獲得事件的目標節點，relatedTarget 可以獲得事件的目標節點相關的節點。ie的話是fromElement/toElement從字面意思也很好理解從那個節點來的/到達那個節點。所有相關節點都已經獲得，這樣我們只要比較他們的關係是不是包含的。Dom也提供了相關的方法，非ie的用compareDocumentPosition這個有很多值一時比較難說的清，ie的是contains 只會得到true或者false。（關於這個方法ppk 和john resing都有比較優雅的封裝，有興趣可以搜尋一下）。

我使用的是這個版本

function contains (a,b){
    try {return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b)&16)}catch(e){};
};

　　

elem.onmouseover=function(e){

　　var e=window.event || e, target= e.currentTarget,related= e.relatedTarget || e.fromElement;//注意這裡

　　if(!contains(target, related) && target!==related){　　　

　　　　//執行代碼

　　}　

}

elem.onmouseout=function(e){

　　var e=window.event || e, target= e.currentTarget,related= e.relatedTarget || e.toElement;//注意這裡

　　if(!contains(target, related) && target!==related){　　　

　　　　//執行代碼

　　}　

}

 

聽同事說是用滑鼠範圍來確定是不是內含項目關聯性，相比這個也是一個不錯的方案有興趣可以實現一下。

 

相關資料見

ppk   http://www.quirksmode.org/js/events_mouse.html

mdn  https://developer.mozilla.org/en/DOM/DOM_event_reference/mouseleave

john resig http://ejohn.org/blog/comparing-document-position/