这个方法很方便地帮助我们解决了模拟mouseenter事件中的条件2，但是悲催的 ode.contains(otherNode) ,具有浏览器兼容性，在一些低级浏览器中是不支持的，为了做到兼容我们再来改写一下contains方法
let contains = docEle.contains ? function (parent, node) { return parent !== node && parent.contains(node) } : function (parent, node) { let result = parent !== node if (!result) { // 排除parent与node传入相同的节点 return result } if (result) { while (node && (node = node.parentNode)) { if (parent === node) { return true } } } return false }
说了这么多，我们来看看用 mouseover 事件模拟 mouseenter 的最终代码
// callback表示如果执行mouseenter事件时传入的回调函数 let emulateEnterOrLeave = function (callback) { return function (e) { let relatedTarget = e.relatedTarget if (relatedTarget !== this && !contains(this, relatedTarget)) { callback.apply(this, arguments) } } }
好了，我们已经通过mouseove事件完整的模拟了mouseenter事件，但是反过头来看看
对于ul上添加的mouseover事件来说，relatedTarget只可能是
ul的父元素wrap(移入ul时,此时也是触发mouseenter事件的时候, 其实不一定，后面会说明 )， 或者ul元素本身(在其子元素上移出时)， 又或者是子元素本身(直接从子元素A移动到子元素B)。
我们通过排查2和3，最后只留下1，也就是mouseenter与mouseover事件一起触发的时机。既然这样我们为什么不像这样判断呢？
target.addEventListener('mouseover', function (e) { if (e.relatedTarget === this.parentNode) { // 执行mouseenter的回调要做的事情 } }, false)
这样不是更加简单吗？，何必要折腾通过排查2和3来做？
原因是，target的父元素有一定的占位空间的时后，我们这样写是没有太大问题的，但是反之，这个时候 e.relatedTarget 就可能是target元素的父元素，又祖先元素中的某一个。我们无法准确判断e.relatedTarget到底是哪个元素。所以通过排除2和3应该是个更好的选择。
用mouseout模拟mouseleave事件
当mouseout被激活时，relatedTarget表示鼠标离开目标元素时，进入了哪个元素，我们同样可以对relatedTarget的值进行判断：如果值不是目标元素，也不是目标元素的子元素，就说明鼠标已移出目标元素
我们同样可以用上面封装的函数完成
// callback表示如果执行mouseenter事件时传入的回调函数 let emulateEnterOrLeave = function (callback) { return function (e) { let relatedTarget = e.relatedTarget if (relatedTarget !== this && !contains(this, relatedTarget)) { callback.apply(this, arguments) } } }
结尾
文中也许有些观点不够严谨，欢迎大家拍砖。
您可能感兴趣的文章: