JavaScript 解决 mouseover/mouseout 事件冒泡与 relatedTarget 兼容方案

JavaScript 解决 mouseover/mouseout 事件冒泡与 relatedTarget 兼容方案

在 Internet Explorer 浏览器中，原生提供了 onmouseleave 和 onmouseenter 事件，但对于需要兼容多种主流浏览器的 Web 开发人员而言，这往往是一个令人头疼的问题。

尽管网络上已有一些针对 Mozilla Firefox 浏览器的应对策略，但这些方案的代码实现量通常不容乐观。

为了寻找更优的解决方案，笔者查阅了国内众多网站，却一无所获，最终不得不转向阅读国外技术文档。结果令人满意，因为 W3C 规范中定义了 relatedTarget 属性，基于此便产生了以下解决方案。

function isMouseLeaveOrEnter(e, handler) {
if (e.type != 'mouseout' && e.type != 'mouseover') return false;
var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;
while (reltg && reltg != handler)
reltg = reltg.parentNode;
return (reltg != handler);
}

在 onmouseover 和 onmouseout 事件处理函数中，通过上述逻辑进行判断即可。

作者:lxsgoodluck