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.formElement;

}

　　用currentTarget可以获得事件的目标节点，relatedTarget 可以获得事件的目标节点相关的节点。ie的话是formElement/toElement从字面意思也很好理解从那个节点来的/到达那个节点。所有相关节点都已经获得，这样我们只要比较他们的关系是不是包含的。Dom也提供了相关的方法，非ie的用compareDocumentPosition这个有很多值一时比较难说的清，ie的是contains 只会得到true或者false。（关于这个方法ppk 和john resing都有比较优雅的封装，有兴趣可以搜索一下）。

我使用的是这个版本

?

function contains (a,b){

try{return 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.formElement;//注意这里

?

　　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){　　　

?

　　　　//执行代码

?