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

Question

我不太清楚如何描述我想要做的事情,但我会尽我所能.

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

此刻,当我将鼠标移到我的孩子<div>身上时,我得到相对于他们的鼠标位置,但我希望坐标相对于父亲,<div>即使将鼠标放在子元素上也是如此.

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

我该怎么做？我是否可能需要以某种方式让父母<div>在forground中,但仍然有孩子<div>的表演？或制作透明<div>叠加层以获得鼠标坐标？

Answer 1

通过将其pointer-eventsCSS属性设置为,可以使元素对事件"透明" none.例如:

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

Answer 2

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

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

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