使一个元素对用户可见，但对事件不可见

Question

我不太确定如何描述我要做的事情，但我会尽力。

目前，我有一个父级<div>，其中包含绝对定位的子级<div>，并且我正在跟踪鼠标指针相对于您所在的元素的位置坐标。

目前，当我悬停在我的子<div>上时，我得到相对于它们的鼠标位置，但是即使在悬停在子元素上时，我也希望坐标相对于父<div>。

因此，我基本上希望子元素可见，但对于mousemove，它们是透明的，因此我希望mousemove直接传递到父元素。

我该怎么做？我可能需要以某种方式使父<div>处于前景，但仍然可以显示子<div>吗？或者制作一个透明的<div>覆盖层来获取鼠标坐标？

- Acorn

Answer 1

你可以通过将元素的CSS属性pointer-events设置为none来使元素对事件“透明”。例如：

<div><!--container-->
<div style="pointer-events: none"><!--inner div; will not respond to mouse clicks-->
</div>
</div>

- Tom

Answer 2

好的，我已经想出了一种方法，当鼠标悬停在子元素上时可以忽略它们。

在获取事件目标时，如果目标的类名匹配某些内容，我只需将目标更改为parentNode：

if (target.className.toLowerCase() === 'ignoreme') { target = target.parentNode; }

- Acorn

Answer 3

如果您将事件处理程序放在父 div 上，那么它将成为接收事件冒泡的对象。至于定位问题，将父 div 设为 position: relative 可能会让您的生活更轻松。据我所知，事件中的鼠标坐标始终相对于窗口，因此您仍然需要进行计算。我很蠢，但过去通过反复试验已经解决了这个问题 :)

- Pointy

---

我将父DIV设置为position:relative，这样我就可以在其中绝对定位我的子div，这很好。是的，你说得对，如果我的事件处理程序在包含div而不是整个页面中，那么子div设置它就没有任何问题了。我仍然很想知道是否有一种方法可以将其作为整个页面事件，但忽略背景或某些元素。 - Acorn

Answer 4

你的代码中使用了 event.target (srcElement)，只需将其替换为相关的 div 即可。

- user187291