将鼠标事件传递给 HTML 下面的元素答案

【问题标题】：Pass mouse event to elements below HTML将鼠标事件传递给 HTML 下面的元素
【发布时间】：2021-06-22 23:30:59
【问题描述】：

这是 Jsfiddle code 演示我的问题

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

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

我怎样才能做到这一点？

【问题讨论】：

我怀疑您可能需要从“事件”中获取 X、Y 坐标（即传递给 onMouseOut 函数的参数，并确定事件是否在外部范围内触发"child1" - 如果是，那么你显然会忽略它
发生这种情况是因为你的鼠标是文学性的。如果您想使用绝对位置，您必须使用@Craig 的评论。
@Craig 我实现了这里给出的解决方案。 stackoverflow.com/questions/36767196/…。但是当我快速将鼠标移出 child1 区域时，它无法捕获它
您实施了该问题的哪个解决方案？接受的答案，还是其他方法之一？归根结底，这取决于浏览器对鼠标移动的解释，所以如果你可以让鼠标在屏幕上飞得比 javascript 代码运行得更快，我不完全确定答案是什么。您已经从自己最初的问题中看到，当绝对元素一个接一个地堆叠时，将鼠标移入上层元素也算作将鼠标移出下层元素。
我尝试在我们的 jsfiddle 中只输出“offsetX”和“offsetY”值，你是对的，每隔一段时间我就可以足够快地移动鼠标，以至于事件没有触发.当然，这并不理想，但我不知道解决方法.....

标签： javascript html css reactjs

【解决方案1】：

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

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

似乎工作here

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

【讨论】：

这正是我所需要的。谢谢。