事件委托的概念大家都很清楚，如果在某個元素上使用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/