[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/