CrossMowenter onMouseenter

Question

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

P.S。我不应该为此使用jQuery或其他框架。

欣赏任何想法。

Answer 1

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

似乎能给出准确的结果：

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()之后的代码只会在事件的目标与应用处理程序的元素相同时触发，从而有效地使事件冒泡对该事件无效。

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

Answer 2

如果您愿意使用jQuery这样的库，那么有一个mouseenter事件可以跨浏览器：

http://api.jquery.com/mouseenter/