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

Question

我有一个带有absolute 定位div 的React 组件，它覆盖了我的应用程序中的其他内容。 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>