如何阻止类Excel网格的Div单元格在特定操作下失去焦点？

我最近实现了一个类Excel的网格系统，每个单元格都是Div元素，绑定了blur、click和keydown事件。其中onKeyDown方法的代码如下：

onKeyDown(event) {
  const { keyCode } = event;
  let element;
  switch (keyCode) {
    case 13: // Key: ENTER
      if (this.isEditingAllowed) {
        element = document.querySelector(`.keyboard-navigable-${this.column}-${this.row}`);
        // 我希望在此阻止事件传播，不触发blur！！
      }
      break;
    case 37: // Key: LEFT
      element = document.querySelector(`.keyboard-navigable-${this.column - 1}-${this.row}`);
      break;
    case 38: // Key: UP
      element = document.querySelector(`.keyboard-navigable-${this.column}-${this.row - 1}`);
      break;
    case 39:
    case 9: // Key: RIGHT || TAB
      element = document.querySelector(`.keyboard-navigable-${this.column + 1}-${this.row}`);
      if (!element) {
        // 超出边界时跳至下一行
        element = document.querySelector(`.keyboard-navigable-0-${this.row + 1}`);
      }
      break;
    case 40: // Key: DOWN
      element = document.querySelector(`.keyboard-navigable-${this.column}-${this.row + 1}`);
      break;
    default:
      break;
  }
  if (element) {
    element.focus();
  }
}

问题是：按下Enter键进入编辑模式时，我需要阻止原单元格的blur事件触发——因为编辑模式会条件渲染其他元素，我不想丢失原元素的上下文。但尝试了preventDefault()和stopPropagation()都没效果。另外，我必须保留blur事件监听，不想手动存储选中的DOM元素来调用.blur()，希望利用原生事件机制解决。

可行的解决方案 #

1. 用标志位控制blur事件的执行逻辑

这是最可靠的方法，核心思路是在按下Enter时标记状态，让blur事件触发时跳过正常逻辑：

首先，在你的类中添加一个实例变量：

class ExcelCell {
  constructor() {
    this.isEnterPressed = false;
    // 其他初始化逻辑
  }

  // ... 其他方法

  onKeyDown(event) {
    const { keyCode } = event;
    let element;
    switch (keyCode) {
      case 13: // Key: ENTER
        if (this.isEditingAllowed) {
          this.isEnterPressed = true;
          // 执行进入编辑模式的逻辑（比如渲染输入框）
          // 延迟让编辑元素获取焦点，避免立即触发blur
          setTimeout(() => {
            const editInput = document.querySelector(`.edit-input-${this.column}-${this.row}`);
            if (editInput) editInput.focus();
            this.isEnterPressed = false;
          }, 0);
          event.preventDefault();
          event.stopPropagation();
        }
        break;
      // ... 其他按键处理
    }
    // ... 原有focus逻辑
  }

  onBlur(event) {
    if (this.isEnterPressed) {
      // 跳过正常的blur处理逻辑
      event.preventDefault();
      event.stopPropagation();
      return;
    }
    // 原有的blur事件逻辑
  }
}

当按下Enter时，我们设置isEnterPressed为true，此时blur事件触发时会检测这个标志，直接跳过后续逻辑；等编辑元素渲染完成并获取焦点后，再重置标志位。

2. 移除不必要的focus调用

看你的Enter按键处理逻辑，你获取了当前单元格的元素并调用了focus()——但当前元素已经处于焦点状态，这一步完全多余，甚至可能导致浏览器误触发焦点变化。直接移除这行代码，能减少blur事件被触发的概率：

case 13: // Key: ENTER
  if (this.isEditingAllowed) {
    event.preventDefault();
    event.stopPropagation();
    // 只执行编辑模式逻辑，不需要再次focus当前元素
  }
  break;

3. 使用stopImmediatePropagation()（谨慎使用）

如果你的blur事件是直接绑定在当前单元格元素上的，stopPropagation()只能阻止事件冒泡到父元素，而stopImmediatePropagation()可以阻止当前元素上后续的所有事件监听器执行。不过要注意，这个方法会影响同一元素上的其他事件绑定，所以要确保事件绑定的顺序正确（keydown要在blur之前绑定）：

case 13: // Key: ENTER
  if (this.isEditingAllowed) {
    event.stopImmediatePropagation();
    event.preventDefault();
    // 执行编辑模式逻辑
  }
  break;

额外注意事项 #

如果进入编辑模式时原单元格Div被重新渲染或替换，blur事件必然会触发（因为DOM元素被移除/更新）。这种情况下，你需要：

• 使用React的useRef（函数组件）或实例变量（类组件）保留原元素的引用
• 通过shouldComponentUpdate或React.memo避免不必要的重新渲染，保持原元素的焦点状态

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