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

Question

输入DOM元素时,mouseover将发生事件.在当前元素周围移动鼠标时,不会发生任何事件,就像mouseover输入一样.

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

看这个例子.如果我们将鼠标移到父项上(实际上是在其textNode上),则不会发生任何新的事情,但如果我们转到子元素(仍然在父元素上),它将mouseover一次又一次地触发事件.实际上,每次鼠标进入元素(甚至在原始父元素内)时,它都会触发鼠标事件.

我们如何才能使mouseover唯一一次移动到父母(原始元素addEventListener)？在给定的示例中,我的意思是避免在子元素上移动鼠标时触发事件.

Answer 1

您真正需要的是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);

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

Answer 2

这对我在 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);

小提琴演示

参考：鼠标事件