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

Question

我不太清楚如何描述我要做的事情，但我会尽我所能。

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

此刻，当我将鼠标放在我的孩子<div>上时，我得到相对于它们的鼠标位置，但我希望坐标相对于父<div>，即使将鼠标放在儿童元素。

所以我基本上希望子元素可见，但对mousemove是透明的，所以我希望mousemove直接进入父元素。

我该怎么做？我是否可能需要以某种方式让父<div>成为forground但仍然让孩子<div>显示出来？或制作透明的<div>叠加层以获取鼠标坐标？

Answer 1

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

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

Answer 2

好的，当我将鼠标移到他们身上时，我已经找到了一种可以忽略子元素的方法。

获取事件的目标时，如果目标的className匹配某些内容，我可以将目标更改为parentNode：

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

Answer 3

如果你把你的事件处理程序放在父div上，那么它就会在事件发生时获取事件。至于定位问题，它可能会让您的生活更容易让您的父div成为position: relative。据我所知，事件中的鼠标坐标总是相对于窗口，因此无论如何你都要进行数学运算。我真的很愚蠢，而且我已经能够通过反复试验解决这个问题：）

Answer 4

你在你的代码中使用event.target（srcElement），只是摆脱它并替换为有问题的div。