时间戳

首页 > 解决方案 > 设置css“pointer-events-none”时触发“onMouseMove”事件

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

问题描述

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

我想设置css值pointer-events-none，以便下面的所有组件div仍然可以点击，有指针事件等。无论何时pointer-events-none存在，onMouseMove事件都不会再触发。一切都应该表现得像覆盖div不存在，它应该只是 fire 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>

我想我错过了一些东西，或者在这里选择了一条完全错误的道路。非常感谢你的帮助！

标签： javascriptcssreactjsjsx

解决方案

您需要将覆盖 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>

推荐阅读