Question

输入DOM元素时，会发生mouseover事件。在当前元素周围移动鼠标时，不会发生任何事件，因为mouseover用于输入。

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

见example。如果我们将鼠标移到父项上（实际上在其textNode上），则不会发生任何新的事情，但如果我们转到子元素（仍然在父元素上），它将一次又一次地触发mouseover事件。实际上，每次鼠标进入元素时（即使在原始父元素内），它都会触发鼠标事件。

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

Answer 1

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

鼠标或鼠标时调度同步mouseenter DOM事件   另一个指向设备进入给予该元素的物理空间   或其中一个后代。

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

不幸的是，它是not widely supported。一种解决方案是使用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);

或see here乍一看是一个非常好的垫片。

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);

Fiddle Demo

参考：Mouse Events

Answer 3

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

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

3 个答案: