javascript - 鼠标输入跨浏览器

Question

我在将 onMouseover 附加到整个元素及其子元素时遇到了一些问题，所以我决定看一下 Microsoft onMouseenter，它基于鼠标位置，现在我想知道是否有跨浏览器解决方案，或者至少对 onMouseover 也适用于 div 子级的修复。

附言我不应该为此使用 jQuery 或其他框架。

感谢任何想法。

Answer 1

编辑:这是一个比我原来的解决方案更好的解决方案。它改为针对 this.parentNode 测试 e.relatedTarget。

似乎给出了准确的结果:

if(  e.relatedTarget !== this.parentNode ) return;

示例: http://jsfiddle.net/FPKKX/1/

...所以你会这样做:

el.onmouseover = function( e ) {
    // typical event obj fix

    if(  e.relatedTarget !== this.parentNode ) return;

    // This will only log to the console for the <div>
    console.log( e.target.tagName, e.relatedTarget.tagName );
};

---

原创

这个解决方案确实不完整。这将需要更好的每个元素跟踪，因为离开内部元素会触发外部元素。您应该能够简单地进行测试以复制 mouseenter 的行为。

示例: http://jsfiddle.net/FPKKX/ (阅读代码注释，然后打开控制台)

el.onmouseover = function( e ) {
    // typical event obj fix

    // if the event is the result of bubbling, return.
    if( this !== e.target ) return;

    // rest of code
};

现在 if() 之后的代码只会在事件目标与应用处理程序的元素相同时触发，有效地使事件冒泡对该事件无效。

请注意，这并不完美。如果有直接对齐容器内边缘之一的内部元素，如果鼠标在该点进入，则接收事件的元素可能是内部元素。需要进行调整。