OnMouseLeave事件仅在鼠标离开父元素时触发的问题

问题描述 #

父div（canvas）包含矩阵式子div（cells），需求是子div鼠标进入时变色、离开时恢复原色，但当前仅在鼠标离开父div时，子div才会恢复原色，离开单个子div时无反应。

核心问题分析 #

1. handleleave1函数为空：未实现鼠标离开子元素时的状态还原逻辑
2. 状态更新效率低下且易出错：原代码每次更新状态都全量拷贝整个二维数组，既浪费性能，也可能导致状态不同步
3. 子元素样式绑定缺失：子div未根据status字段绑定对应类名，可能导致样式变化不生效

修复方案 #

1. 实现handleleave1函数并优化状态更新 #

使用React函数式更新，仅修改目标单元格状态，避免全量拷贝：

const handleenter1 = (row, col) => {
  setcanvas(prevCanvas => {
    // 浅复制每一行，避免直接修改原状态
    const newCanvas = prevCanvas.map(rowItem => [...rowItem]);
    // 更新目标单元格状态为wall
    newCanvas[row][col] = {...newCanvas[row][col], status: "wall"};
    return newCanvas;
  });
};

const handleleave1 = (row, col) => {
  setcanvas(prevCanvas => {
    const newCanvas = prevCanvas.map(rowItem => [...rowItem]);
    // 保留starter单元格原有状态，其他还原为space
    const targetStatus = prevCanvas[row][col].status === "starter" 
      ? "starter" 
      : "space";
    newCanvas[row][col] = {...newCanvas[row][col], status: targetStatus};
    return newCanvas;
  });
};

2. 绑定子元素样式类名 #

确保子div的className与status字段关联，实现样式变化：

<div 
  key={`${index1} ${index}`} 
  className={obj.status}
  onMouseEnter={() => handleenter1(obj.x, obj.y)}
  onMouseLeave={() => handleleave1(obj.x, obj.y)}
></div>

3. 优化初始化逻辑 #

替换var为let避免变量提升问题，简化初始化代码：

const create = () => {
  const a = [];
  for (let i = 0; i < 50; i++) {
    a.push([]);
    for (let j = 0; j < 20; j++) {
      const obj = i === 10 && j === 10 
        ? {x: i, y: j, status: "starter"} 
        : {x: i, y: j, status: "space"};
      a[i].push(obj);
    }
  }
  setcanvas(a);
};

效果验证 #

修改后，鼠标进入子div时会触发handleenter1更新状态并变色，离开子div时触发handleleave1还原状态，无需等待离开父div即可生效。

内容的提问来源于stack exchange，提问作者Anurag-210