javascript - 将鼠标事件传递给 HTML 下面的元素

Question

这是演示我的问题的Jsfiddle 代码

两个 div 标签 child1 和 child2 是绝对放置的，因此 child2 将位于 child1 元素的顶部。我需要OnMouseOut在 child1 上捕获事件。

我在 child1 上注册OnMouseOut了事件，但是当我将鼠标悬停在 child2 上时，OnMouseOut即使我仍在 child1 中，也会触发事件。如果我pointer-events在 child2 上设置为 none ，它会按预期工作。但我不想这样做，因为我也想在 child2 上捕获指针事件。

我怎样才能做到这一点？

标签： javascripthtmlcssreactjs

Answer 1

如果你让 child2 成为 child1 的孩子，你可以使用 mouseleave 事件而不是 mouseout 事件。

mouseleave 在指针退出元素及其所有后代时触发，而 mouseout 在指针离开元素或离开元素的后代之一时触发（即使指针仍在元素内） - mdn

似乎在这里工作

<div id="child1">
    child1
    <div id="child2">child2</div>
</div>
//script : document.getElementById("child1").addEventListener('mouseleave',onMouseOut);