设置 css "pointer-events-none"时"onMouseMove"触发事件

Question

我有一个React组件，它有一个位于absolute的div，它覆盖了我的应用程序中的其他内容。div用于激发react的onMouseMove事件。

我想设置css值pointer-events-none，这样div下面的所有组件仍然可以点击，都有指针事件等。无论pointer-events-none何时出现，onMouseMove事件都不会再触发。一切都应该表现为覆盖div不存在，它应该只触发onMouseMove。

代码结构如下：

<button>I should be clickable</button>
<div>
<div
style={{
opacity: 0,
position: `absolute`,
top: `50px`,
left: `50px`,
width: `30vw`,
height: `30vh`,
pointerEvents: `none`,
}}
onMouseMove={() => {
console.log(`Fire!`)
}}
>
Overlay
</div>
<button>I should be clickable</button>
<a>I should be clickabel</a>
</div>
<button>I should be clickable</button>

我想我错过了什么，或者选择了一条完全错误的道路。非常感谢你的帮助！

Answer 1

您需要将覆盖div放置在根目录(在这种情况下，事件将传播(，删除pointerEvents规则和不透明度，以便div内的内容可见：

<div
style={{
position: `absolute`,
top: `50px`,
left: `50px`,
width: `30vw`,
height: `30vh`
}}
onMouseMove={() => {
console.log(`Fire!`)
}}
>
<button>I should be clickable</button>
<button>I should be clickable</button>
<a>I should be clickable</a>
<button>I should be clickable</button>
</div>