JavaScript 中事件捕获与冒泡怎么在 keydown 事件中通过 preventDefault 禁用快捷键-js教程-PHP中文网

关键在于监听位置要够“早”、精准判断组合键、识别浏览器限制及避免副作用：需绑定到document并启用捕获阶段，用event.code结合修饰键判断，检查e.cancelable再调preventDefault()，并根据上下文（如activeElement）规避误拦。

javascript 中事件捕获与冒泡怎么在 keydown 事件中通过 preventdefault 禁用快捷键

在 keydown 事件中禁用快捷键，关键不在于“用捕获还是冒泡”，而在于确保事件监听器能捕获到按键、且调用 preventDefault() 的时机和位置正确。默认情况下，keydown 是冒泡阶段触发的，但浏览器对某些系统级快捷键（如 Ctrl+T、F5、Alt+F4）有保护机制——即使你加了监听器并调用了 preventDefault()，部分行为仍可能无法阻止。

1. 监听位置要够“早”：优先用捕获阶段

快捷键往往由 document 或 window 级别响应。如果只在某个输入框上监听，就拦不到全局快捷键。而且，若页面中多个元素监听了同一事件，捕获阶段比冒泡更早执行，能更可靠地“抢在系统处理前干预”。

把监听器绑定到 document，并启用捕获：
document.addEventListener('keydown', handler, true);
避免只绑在 input、textarea 等局部元素上（除非你只管局部快捷键）
注意：不能用 onkeydown 属性或 HTML onkeydown，它们只支持冒泡，且无法控制捕获

2. 判断并阻止目标快捷键：准确识别组合键

不是所有 keydown 都需要阻止。要用 event.ctrlKey、event.metaKey（Mac 的 ⌘）、event.shiftKey、event.altKey 结合 event.key 或 event.code 精准匹配。

推荐用 event.code（如 'KeyT'、'F5'），它与键盘物理位置相关，不受输入法/布局影响
避免仅靠 event.key（如 't'），因为大小写、CapsLock、输入法会干扰判断
示例：阻止 Ctrl+T（新标签页）和 Cmd+R（刷新）
if ((e.ctrlKey || e.metaKey) && (e.code === 'KeyT' || e.code === 'KeyR')) { e.preventDefault(); }

3. 注意浏览器限制：有些快捷键根本禁不掉

出于安全与用户体验考虑，现代浏览器明确禁止 JS 干预部分核心快捷键：

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

✅ 可阻止：Ctrl+B（加粗）、Ctrl+U（查看源码）、自定义组合键（如 Ctrl+Shift+K）
❌ 不可阻止：Ctrl+T / Cmd+T、Ctrl+W / Cmd+W、F5 / Cmd+R、Alt+F4 等——调用 preventDefault() 无效，事件对象的 cancelable 属性为 false
⚠️ 小技巧：可通过 e.cancelable === false 提前跳过无意义的 preventDefault()

4. 避免副作用：别误伤正常输入

全局监听 keydown 容易影响表单输入。应加白名单或上下文判断：

如果页面处于编辑状态（如 contenteditable、input 获焦），通常不该拦截快捷键（如 Ctrl+Z 撤销）
检查 document.activeElement 是否为可编辑元素，或是用 e.target.matches('input, textarea, [contenteditable]')
对必须拦截的场景（如游戏、IDE 类应用），建议提供开关或明确提示用户“快捷键已接管”

不复杂但容易忽略：捕获阶段 + document 级监听 + code 判断 + cancelable 检查，四者配合才能稳健禁用可干预的快捷键。