React自定义跟随光标导致ProjectCard的mouseenter与mouseleave事件异常触发

问题根因 #

你实现的自定义光标包含的.circle、.circle-follow两个DOM元素默认会响应鼠标事件，且层级高于下层的ProjectCard组件。当鼠标移入ProjectCard区域时，自定义光标元素会跟随鼠标移动，出现在鼠标指针和ProjectCard之间，导致鼠标被判定为悬停在光标元素上，触发ProjectCard的mouseleave事件；光标元素跟随鼠标偏移离开当前位置后，鼠标又重新接触到ProjectCard，触发mouseenter事件，循环往复就出现了事件反复触发的问题。

解决方案 #

给两个自定义光标元素添加CSS属性pointer-events: none，该属性会让元素完全不接收任何鼠标交互事件，鼠标指针可以直接穿透元素命中下层的内容，不会干扰原有组件的鼠标事件触发。

你可以选择两种实现方式：

方式1：直接在组件内联样式添加 #

修改Cursor组件的返回部分代码：

return (
  <>
    <div className="circle" ref={cursorRef} style={{ pointerEvents: 'none' }}></div>
    <div className="circle-follow" ref={cursorFollowerRef} style={{ pointerEvents: 'none' }}></div>
  </>
);

方式2：在全局CSS中添加 #

.circle, .circle-follow {
  pointer-events: none;
  /* 保留原有其他样式不变 */
}

修改完成后即可实现预期效果：鼠标移入ProjectCard仅触发一次mouseenter，完全移出时仅触发一次mouseleave，组件内部移动鼠标不会重复触发事件。

内容的提问来源于stack exchange，提问作者Krešimir Galić