React-Konva节点onMouseOver事件中e.relatedTarget为undefined的解决咨询

React-Konva的合成事件并未封装relatedTarget属性，因为Canvas是单个DOM元素，所有内部节点的交互都是Konva模拟实现的，原生DOM事件的relatedTarget（指向DOM元素）在这里不适用。要实现类似功能，需要手动追踪鼠标之前悬停的节点：

解决方案：手动追踪hover节点 #

通过Stage的onMouseMove事件记录当前鼠标悬停的节点，在目标节点的onMouseOver/onMouseEnter事件中，这个记录的节点就相当于relatedTarget。

修改后的代码示例 #

import { useState } from 'react';
import { Stage, Layer, Rect } from 'react-konva';

const App = () => {
  // 保存上一个悬停的节点
  const [prevHoverNode, setPrevHoverNode] = useState(null);

  const handleStageMouseMove = (e) => {
    const currentNode = e.target;
    if (currentNode !== prevHoverNode) {
      setPrevHoverNode(currentNode);
    }
  };

  const onMouseOverRect = (e) => {
    const trgt = e.target;
    // prevHoverNode即为鼠标从其移入当前节点的目标
    const relTrgt = prevHoverNode;
    console.log(trgt, "target");
    console.log(relTrgt, "related Target");  
  };

  return (
    <Stage 
      width={window.innerWidth} 
      height={window.innerHeight}
      onMouseMove={handleStageMouseMove}
    >
      <Layer>
        <Rect x={50} y={50} width={100} height={100} fill="red" onMouseOver={onMouseOverRect}/>
        <Rect x={200} y={50} width={100} height={100} fill="blue"/>
      </Layer>
    </Stage>
  );
};

export default App;

说明 #

• 当鼠标从Canvas外部移入节点时，prevHoverNode会是Stage实例（最顶层节点），可根据需求判断是否视为“无前置节点”。
• 这种方式能准确模拟原生relatedTarget的核心功能：获取鼠标移入当前元素前所在的节点。

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