React实现元素随鼠标点击位置显示的方法

你的代码功能正常，但菜单默认固定在容器左上角，要改成跟随鼠标点击位置显示，只需做以下修改：

步骤1：记录鼠标点击坐标 #

在组件里新增状态存储点击位置，同时修改点击事件处理函数，获取鼠标点击时的坐标：

const GamePage = () => {
  const [isShown, setIsShown] = useState(false);
  // 新增状态保存点击坐标
  const [clickPosition, setClickPosition] = useState({ x: 0, y: 0 });

  const handleClick = (e) => {
    // 获取鼠标相对于视口的点击坐标
    const { clientX, clientY } = e;
    setClickPosition({ x: clientX, y: clientY });
    setIsShown(current => !current);
  };

  return (
    <div className="gamepage" onClick={handleClick}>
      {isShown && (
        <ul 
          className="menu"
          // 给菜单绑定定位坐标
          style={{
            left: `${clickPosition.x}px`,
            top: `${clickPosition.y}px`
          }}
        >
          <li className="menu-item">Waldo</li>
        </ul>
      )}
      <GamePageImage />
    </div>
  );
};

步骤2：调整菜单定位偏移（可选） #

默认菜单左上角会对齐点击点，如果你想让菜单中心或其他位置对齐点击点，可调整坐标偏移：

style={{
  left: `${clickPosition.x - 50}px`, // 菜单宽度100px，减50让X轴中心对齐
  top: `${clickPosition.y - 20}px`   // 按菜单实际高度调整，让Y轴中心对齐
}}

步骤3：优化CSS样式 #

去掉菜单默认margin避免干扰定位，同时确保容器匹配全屏图片的尺寸：

.gamepage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.menu {
  position: absolute;
  text-align: center;
  list-style-type: none;
  margin: 0; /* 移除默认margin，避免定位偏移 */
  padding: 0;
  border: 1px solid #3e3e3e;
  width: 100px;
  z-index: 10; /* 确保菜单显示在图片上方 */
}

.menu > li {
  margin: 0;
  color: white;
  background-color: #3e3e3e;
}

.menu > li:hover {
  cursor: pointer;
  background-color: #252525;
}

补充说明 #

• 如果图片不是全屏（存在缩放、边距），可以把clientX/clientY换成offsetX/offsetY，获取相对于图片元素的点击坐标。
• 偏移量需根据菜单实际宽高计算，确保显示位置符合预期。

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