如何在可编辑表格单元格中捕获Delete键的keydown事件？

我需要在设置了contenteditable="true"的表格单元格中捕获Delete键的keydown事件，操作流程是：

• 点击选中目标单元格
• 按下Delete键

原始HTML结构如下：

<!-- index.html -->
<table contenteditable="true">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
    </tr>
</table>

给单元格绑定click事件时功能正常，点击就能删除单元格：

// script.js
const tdElements = document.querySelectorAll("td");
function clickHandler(){this.remove()}
tdElements.forEach((item)=>{item.addEventListener("click", clickHandler)});

但直接给td绑定keydown事件时，按下Delete键只会删除单元格内容，事件监听器完全没触发（console无输出）：

// script.js
const tdElements = document.querySelectorAll("td");
function keydownHandler() {console.log(event.key)}; // 无输出
tdElements.forEach((item)=>{item.addEventListener("keydown", keydownHandler)})

只有把监听器绑定到document上时，才能正常捕获按键事件：

// script.js
function keydownHandler() {console.log(event.key)}; // 正常输出
document.addEventListener("keydown", keydownHandler)

问题原因 #

当单元格处于可编辑状态时，实际获得焦点的是单元格内部的文本节点，而非td元素本身。keydown事件默认在冒泡阶段触发，此时事件从文本节点向上冒泡，但浏览器的内置编辑行为会干扰这个过程，导致td上的监听器无法捕获到事件。

解决方案 #

方案1：开启事件捕获模式

给td绑定监听器时，将第三个参数设为true，让事件在捕获阶段就被td捕获（事件从document向下传递时就触发监听器），跳过文本节点的干扰：

const tdElements = document.querySelectorAll("td");
function keydownHandler(event) {
  if (event.key === 'Delete') {
    console.log('Delete键已捕获');
    // 执行删除单元格操作
    this.remove();
    // 阻止默认删除内容的行为
    event.preventDefault();
  }
}
tdElements.forEach(item => {
  item.addEventListener("keydown", keydownHandler, true);
});

方案2：通过document监听并过滤目标

如果不想给每个td单独绑定监听器，可以在document上统一监听，然后通过closest()方法判断事件目标是否属于td单元格，再执行逻辑：

function keydownHandler(event) {
  if (event.key === 'Delete') {
    const targetTd = event.target.closest('td');
    if (targetTd) {
      console.log('单元格内Delete键被触发');
      targetTd.remove();
      event.preventDefault();
    }
  }
}
document.addEventListener("keydown", keydownHandler);

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