React自定义准星遮挡元素导致按钮onclick事件无法触发如何解决

问题根源 #

你的自定义准星DOM元素使用了fixed固定定位，默认层级高于下方的按钮元素，所有鼠标交互事件都会被上层的准星元素拦截，因此下层的按钮无法触发点击。调整系统光标的z-index不生效，是因为拦截事件的是准星这个实体DOM元素，而非系统光标本身。

解决方案 #

最简单的方案是给自定义准星元素添加pointer-events: none CSS属性，该属性可以让元素完全不接收任何鼠标、触摸交互事件，所有操作都会直接穿透到下层元素，同时不会影响元素的正常渲染显示。

同时你原代码存在几个可优化的错误点：

• mousemove监听中同时设置top/bottom、left/right会导致准星元素被拉伸变形，只需保留top和left设置即可
• useEffect没有传入空依赖数组，会重复执行多次绑定监听事件
• 样式属性名backgroud拼写错误，正确为background

修正后完整代码 #

const { useRef } = React

const Main = props => {
  const cursor = {
    cursor: "crosshair",
    width: "20PX",
    height: "20PX",
    position: "fixed",
    // 新增属性，让准星不拦截鼠标事件
    pointerEvents: "none",
    // 可以额外加transform居中准星，避免准星左上角对准鼠标位置
    transform: "translate(-50%, -50%)"
  };
  
  const borders = {
    width: "800px",
    height: "500px",
    background: "#ccc",
    border: "4px solid #333"
  }
  
  const textInput = useRef()

  React.useEffect(() => {
    const handleMouseMove = (event) =>{
      textInput.current.style.top =  event.clientY  + 'px' 
      textInput.current.style.left = event.clientX + 'px' 
    }
    document.addEventListener("mousemove", handleMouseMove)
    // 增加清理函数，组件卸载时移除监听避免内存泄漏
    return () => document.removeEventListener("mousemove", handleMouseMove)
  }, []); // 空依赖数组，仅挂载时执行一次
  
  return (<div  style={borders} >
    <div ref={textInput} style={cursor}>
    </div>   
    <button onClick={() => alert('点击成功')}>dsa2222ads</button>
  </div>)
}

ReactDOM.render(<Main  />, document.getElementById("root"));

特殊场景补充 #

如果后续你需要给自定义准星本身添加交互事件，可以取消pointer-events: none配置，在准星的点击事件中通过document.elementFromPoint(event.clientX, event.clientY)获取当前点击位置下层的元素，手动触发对应元素的点击事件即可。

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