本文介绍一种轻量、可靠的方式：在对话框开启期间仅响应 escape 键关闭操作，其余 `keydown` 事件自动忽略，无需动态增删监听器，避免竞态与内存泄漏风险。
在 Chrome 扩展开发中，常需通过快捷键（如 D）触发自定义对话框，并在对话框激活时限制用户交互——例如仅允许按 Esc 关闭，而屏蔽其他所有按键行为（如输入、滚动、页面跳转等）。关键误区是试图“临时移除并恢复”全局 keydown 监听器；这不仅增加复杂度，还易引发事件监听器管理混乱、重复绑定或遗漏恢复等问题。
正确做法是保持单一监听器长期注册，通过状态判断决定是否响应事件。核心逻辑如下：
- 使用 dialog.open 属性（原生 <dialog> 元素的只读布尔值）实时判断对话框可见状态；
- 若对话框未打开：正常处理快捷键（如 'd'）和常规输入（如记录按键）；
- 若对话框已打开：仅检查 e.key === 'Escape'，其余按键直接忽略（不调用 preventDefault() 亦不影响默认行为，因本就不响应）；
- 无需调用 e.preventDefault() 或 e.stopImmediatePropagation()——简洁即安全。
以下为可直接运行的示例代码（兼容 Manifest V3）：
<p id="log">按键记录：</p> <dialog id="myDialog"> <p>我的对话框。按 Esc 关闭</p> <button id="closeBtn">关闭</button> </dialog>
const logEl = document.getElementById('log');
const dialog = document.getElementById('myDialog');
const closeBtn = document.getElementById('closeBtn');
// 统一 keydown 处理器
document.addEventListener('keydown', (e) => {
if (!dialog.open) {
// 对话框关闭时：支持快捷键 + 日志
if (e.key.toLowerCase() === 'd') {
dialog.showModal(); // 推荐使用 showModal() 实现模态阻断
} else {
logEl.textContent += e.key;
}
} else {
// 对话框开启时：仅响应 Esc
if (e.key === 'Escape') {
dialog.close();
}
}
});
// 同时支持按钮关闭（增强可用性）
closeBtn.addEventListener('click', () => dialog.close());
// 可选：点击对话框 backdrop 时也关闭（需 CSS 支持）
dialog.addEventListener('click', (e) => {
if (e.target === dialog) dialog.close();
});⚠️ 注意事项：
- 始终优先使用 dialog.showModal() 而非 show()，前者自动捕获焦点、禁用背景交互，更符合模态对话框语义；
- 不要对非 Escape 键调用 e.preventDefault() —— 这可能导致意外阻止浏览器原生行为（如空格滚动、Tab 切换）；
- 若扩展需注入到第三方页面，请确保 DOM 元素存在后再绑定事件（建议配合 document.readyState 或 MutationObserver）；
- <dialog> 在部分旧版 Chromium 中需启用实验性标志，生产环境建议添加降级方案（如 div + aria-modal）。
总结：状态驱动的事件过滤比动态启停监听器更健壮、更易维护。掌握这一模式，你不仅能优雅解决对话框拦截问题，还能将其延伸至表单锁定、全屏编辑、游戏控制等多类场景。
