5

进入 DOM 元素时，mouseover会发生事件。在当前元素周围移动鼠标时，不会发生任何事件，就像mouseover进入一样。

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

请参阅此示例。如果我们将鼠标移动到父元素上（实际上是在它的 textNode 上），没有任何新的事情发生，但是如果我们转到子元素（仍然在父元素上），它将mouseover一次又一次地触发事件。事实上，每次鼠标进入一个元素（甚至在原始父元素内）时，它都会触发鼠标事件。

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

4

3 回答 3

5

您真正需要的是mouseenter不会冒泡的事件（与 不同mouseover）。来自 MDN：

当鼠标或其他指点设备进入分配给元素或其后代之一的物理空间时，将调度同步 mouseenter DOM 事件。

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

不幸的是，它没有得到广泛的支持。一种解决方案是使用 jQuery（请参阅.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);

或者看看这里乍一看是一个非常好的垫片。

于 2012-06-26T07:46:21.667 回答
4

这在 chrome 和 ff 中对我有用

document.getElementById("parent").addEventListener('mouseover', function(event) {
    var e = event.fromElement || event.relatedTarget;
    if (e.parentNode == this || e == this) {
        return;
    }
    document.getElementById("time").innerHTML = new Date();
}, true);

小提琴演示

参考：鼠标事件

于 2012-06-26T08:58:30.900 回答
0

在您的示例中，子元素没有触发任何事件，它是您的父元素，当您将鼠标悬停在其上时，它会运行您的脚本并在您的“时间”div 中显示结果。

于 2012-06-26T07:46:09.527 回答