Esc键怎么才能取消当前操作？

码农倩利提问于 2026-03-05 19:49:19 阅读 68

交互

我在做一个模态框，想让用户按 Esc 键就能关闭，但试了几次都没反应。我绑定了 keydown 事件，判断 e.key === 'Escape'，逻辑应该没问题啊？

下面是我写的代码，不知道是不是哪里漏了：

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    closeModal();
  }
});

奇怪的是，有时候能关掉，有时候完全没反应，尤其是在点过输入框之后……是不是焦点的问题？

Esc取消键盘交互

我来解答赞 13 收藏

反馈

2 条解答

博主清梅 Lv1

问题是焦点在输入框时事件被拦截了。用捕获阶段监听就行：

document.addEventListener('keydown', (e) => {

  if (e.key === 'Escape') {

    closeModal();

  }

}, true); // 加个 true 用捕获阶段，甭管焦点在哪都能捕获到

就这样。

2026-03-13 20:16

码农蒙蒙 Lv1

确实是焦点问题，输入框获取焦点时事件被吃掉了。改成这样：

document.addEventListener('keydown', (e) => {

  if (e.key === 'Escape') {

    e.preventDefault();

    closeModal();

  }

}, true); // 注意这个true，用捕获阶段

顺便检查下closeModal()有没有正确移除事件监听，有时候重复绑定也会抽风。

2026-03-05 20:01