在IE的全系列中都实现了mouseenter和mouseleave事件,但是在早期的w3c浏览器中却没有实现这两个事件。有时候,我们需要使用
mouseenter事件来防止子元素的冒泡,这就涉及到事件兼容性的问题了。
先比较mouseenter和mouseover的异同点,当从元素外围进入元素内部时同时触发mouseover和mouseenter事件,但是在元素内部,
鼠标进入元素子节点时会继续触发mouseover事件,该事件是可以向上冒泡的;对于mouseenter则不会冒泡,当然也不会触发该事件。
mouseleave亦然。
用mouseover来模拟mouseenter的关键在于利用事件的relatedTarget判定鼠标是否在元素内部移动,这也涉及到dom元素contain()
的实现。为了高效的实现contain方法,尽量使用浏览器的原生API,如果没有则只能向上回溯。
function contain(p,c){
if(p == c)return false;
if(p.compareDocumentPosition){
return !!(p.compareDocumentPosition(c) & 16);
}else if(p.contains){
return p.contains(c);
}
var cur;
while(c = c.parentNode){
if(c.nodeType == 3 || c.nodeType == 8) continue;
if(c !== p) continue;
else{
return true;
}
}
return false;
}
然后着重修复mouseover事件:
var fixMouseenter = function(el,fn){
return window.VBArray ? {
el: el,
type: 'mouseenter',
fn: fn
} : {
el: el,
type: 'mouseover',
fn: function(e){
!contain(el,e.relatedTarget) && fn.call(this,arguments);
}
};
};
var fixMouseleave = function(el,fn){
return window.VBArray ? {
el: el,
type: 'mouseleave',
fn: fn
} : {
el: el,
type: 'mouseout',
fn: function(e){
!contain(el,e.relatedTarget) && fn.call(this,arguments);
}
};
};
这样对于非IE浏览器都进行事件修复,但是缺点也有不少,就是新版本的w3c浏览器都已经实现了这两个事件,所以我们就没有必要
在进行事件修复。