React中点击元素后onMouseMove事件失效问题求助

问题重现 #

鼠标移至包含图片的div上时，handleMouseMove事件正常触发，但点击该div后事件停止工作，仅当光标移出窗口后才恢复功能。

原因分析 #

点击元素（包括内部图片）后，浏览器会启动鼠标事件捕获机制，后续的mousemove事件无法正确传递到父div上，直到光标移出窗口解除捕获。

解决方案 #

方案一：让图片穿透鼠标事件

给内部img元素添加pointerEvents: "none"样式，使所有鼠标事件直接作用于父div：

import React from "react";

const Finder = () => {
  const handleMouseMove = (e) => {
    console.log("handleMouseMove");
  };

  const handleClick = () => {
    console.log("onClick");
  };

  return (
    <div
      onMouseMove={handleMouseMove}
      onClick={handleClick}
      style={{ backgroundColor: "red", width: 281, height: 610 }}
    >
      <img
        src="/img/Clothing/ClothingGirl1.jpg"
        style={{
          width: 281,
          height: 610,
          border: "1px solid silver",
          pointerEvents: "none" // 新增穿透样式
        }}
        alt="alt"
      />
    </div>
  );
};

export default Finder;

该方案适用于不需要图片处理任何鼠标事件的场景。

方案二：阻止mousedown默认行为

在父div上添加onMouseDown事件并阻止默认行为，避免浏览器启动鼠标捕获：

import React from "react";

const Finder = () => {
  const handleMouseMove = (e) => {
    console.log("handleMouseMove");
  };

  const handleClick = () => {
    console.log("onClick");
  };

  return (
    <div
      onMouseMove={handleMouseMove}
      onClick={handleClick}
      onMouseDown={(e) => e.preventDefault()} // 新增阻止默认行为
      style={{ backgroundColor: "red", width: 281, height: 610 }}
    >
      <img
        src="/img/Clothing/ClothingGirl1.jpg"
        style={{
          width: 281,
          height: 610,
          border: "1px solid silver",
        }}
        alt="alt"
      />
    </div>
  );
};

export default Finder;

该方案更通用，即使图片需要处理自身鼠标事件也能生效，仅会禁用部分浏览器默认行为（如图片拖拽、文本选中）。

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