首页 > 代码库 > mouseenter以及mouseleave兼容性
mouseenter以及mouseleave兼容性
在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(e.relatedTarget,this) && 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(e.relatedTarget,this) && fn.call(this,arguments); } }; };
这样对于非IE浏览器都进行事件修复，但是缺点也有不少，就是新版本的w3c浏览器都已经实现了这两个事件，所以我们就没有必要
在进行事件修复。
mouseenter以及mouseleave兼容性
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。