阻止键盘事件冒泡至父元素：pill内button聚焦时Delete/Backspace触发父事件如何解决

现有pill组件内部包含label和button元素，选中pill后按下Delete或Backspace键可移除该pill，点击pill内部的button也可执行删除操作。
当前异常表现：当焦点落在pill内部的button上时，按下Delete或Backspace键会触发父元素绑定的按键回调函数，尝试使用preventDefault和stopPropagation处理未生效，需要实现button聚焦时阻止这两个键盘事件触发父元素回调的效果。

原有相关代码 #

HTML结构 #

<span class="pill" tabindex="0">
  <span>Pill<span>
  <button type="button" class="btn">X</button>
</span>

JS逻辑 #

function onKeyPress(e) {
  switch (e.keyCode) {
      case 46:
      case 8:
        e.preventDefault();
        handleClose();
        break;
      default:
        break;
    }
}

function handleClose() {
  console.log('Clear the pill!');
}

document.querySelector('.pill')
    .addEventListener('keydown', onKeyPress);
document.querySelector('.btn')
    .addEventListener('click', handleClose);

根因 #

键盘事件默认沿DOM树向上冒泡，仅在父元素绑定keydown监听、未对内部button的对应键盘事件做拦截时，事件冒泡到父级就会触发回调，属于正常的事件传播机制表现。

以下为两种可行实现方案： #

方案1：给button单独绑定keydown监听拦截冒泡 #

给内部btn新增keydown事件监听，触发Delete/Backspace时阻止事件向上传播：

document.querySelector('.btn').addEventListener('keydown', (e) => {
  if (e.key === 'Delete' || e.key === 'Backspace') {
    e.stopPropagation();
    // 不需要触发按钮默认按键行为可额外添加e.preventDefault()
  }
})

方案2：父元素回调内判断事件源过滤逻辑 #

无需新增子元素监听，直接在父元素的keydown回调中判断事件触发来源，若为button则直接跳过后续逻辑，代码更简洁更推荐使用：

function onKeyPress(e) {
  // 事件触发源为内部按钮时直接返回，不执行后续删除逻辑
  if (e.target.classList.contains('btn')) return
  // 注：keyCode已被标准废弃，替换为e.key兼容性和可读性更好
  if (e.key === 'Delete' || e.key === 'Backspace') {
    e.preventDefault();
    handleClose();
  }
}

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