React中如何让被上层透明固定div遮挡的下层元素响应鼠标事件？

这个问题我太熟悉了！你遇到的核心问题就是那个层级在上的固定div把所有鼠标事件都“拦”下来了，导致下面的按钮根本接不到点击信号。这里有两种针对性的解决办法，看你的需求来选：

方案一：让透明Div不拦截鼠标事件（最简单优雅） #

如果这个透明div只是用来监听全局鼠标移动，其实可以直接用CSS的pointer-events: none属性——它会让这个div完全忽略所有鼠标事件，点击、hover等操作都会直接穿透到下面的元素。不过要注意：设置这个属性后，div自身的鼠标事件监听会失效，所以我们可以把鼠标移动监听绑定到document上，一样能实现全局监听的效果。

另外提醒两个React代码里的小细节：React里要用className代替原生的class，还有鼠标移动的事件名是onMouseMove不是onMove哦。修改后的代码如下：

import { useEffect } from 'react';

// 组件内代码
render() {
  // 在组件挂载时绑定全局鼠标移动监听
  useEffect(() => {
    const handleMouseMove = (e) => {
      console.log('Mouse moved!');
    };
    document.addEventListener('mousemove', handleMouseMove);
    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);

  return(
    <div>
      <div className="fixed-transparent" style={{ pointerEvents: 'none' }}></div>
      <div className="btn" onClick={()=>{console.log('Button click!')}}>
        I'm a button
      </div>
    </div>
  );
}

方案二：保留Div的局部鼠标监听，同时让按钮可点击 #

如果你需要的是只监听这个透明div范围内的鼠标移动，那可以通过调整层级来解决：给按钮设置更高的z-index，让它“浮”在透明div的上层，这样就能正常接收点击事件，同时透明div的鼠标移动监听也不受影响。

对应的CSS调整：

.fixed-transparent {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* 基础层级 */
}

.btn {
  position: relative; /* 必须设置position才能生效z-index */
  z-index: 2; /* 按钮层级高于透明div */
}

代码里只需要把class改成className，onMove改成onMouseMove就可以正常运行了。

总结一下：全局监听选方案一，局部监听选方案二，两种都能完美解决按钮被遮挡的问题～

内容的提问来源于stack exchange，提问作者Poogy