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