如何在 Javascript 中触发一次鼠标事件以移动子元素？

当输入 DOM 元素时，mouseover事件将会发生。在当前元素周围移动鼠标时，不会发生任何事件，如下所示mouseover是为了进入。

但是，子节点不遵守此规则。如果将鼠标移动到子节点上，mouseover事件将被一次又一次地触发，尽管没有新的事件，因为我们仍然在原始父级中。

看到这个example http://jsfiddle.net/ww645/。如果我们将鼠标移到父元素上（实际上是在其 textNode 上），不会发生任何新情况，但是如果我们转到子元素（仍在父元素上），它将触发mouseover事件一次又一次。事实上，每次鼠标进入元素时（即使在原始父元素内部），它都会触发鼠标事件。

我们如何才能使mouseover仅一次用于在整个父级上移动（原始元素addEventListener）？在给定的示例中，我的意思是避免在子元素上移动鼠标时触发事件。

你真正需要的是mouseenter https://developer.mozilla.org/en/DOM/DOM_event_reference/mouseenter事件，它不会冒泡（与mouseover）。来自 MDN：

当鼠标或鼠标移动时，会调度同步 mouseenter DOM 事件 另一个指向设备进入给定元素的物理空间 或其后代之一。

与 mouseover 类似，不同之处在于它不会起泡然后 当指针从其后代之一移动时，不会发送它 物理空间到它自己的物理空间。

不幸的是，这是没有得到广泛支持 http://www.quirksmode.org/dom/events/index.html#t017。一种解决方案是使用 jQuery（请参阅.mouseenter() http://api.jquery.com/mouseenter/），它会在它支持的所有浏览器中填充该事件。另一种选择是检查触发事件的元素：

document.getElementById("parent").addEventListener('mouseover', function(e) {
    if (e.target.id === "parent") { //Only execute following on parent mouseover
        document.getElementById("time").innerHTML = new Date;
        this.childNodes[1].style.display="block";
    }
}, false);

Or see here http://blog.stchur.com/2007/03/15/mouseenter-and-mouseleave-events-for-firefox-and-other-non-ie-browsers/乍一看，这是一个相当不错的垫片。