在document上用addEventListener('keydown', handler, true)监听全局快捷键最可靠，需用e.preventDefault()阻止默认行为，通过e.ctrlKey等判断组合键，避免与浏览器冲突，并在React/Vue中正确管理生命周期。
HTML5 页面中怎么用 keydown 监听全局快捷键
直接在 document 上监听 keydown 是最常用也最可靠的方式，但要注意事件触发时机和焦点状态的影响。页面加载后立即绑定，避免用户操作早于监听器注册。
常见错误是只给某个输入框（如 input）加监听，结果按快捷键时焦点不在该元素上就完全没反应；或者用 keypress（已废弃且不支持 Ctrl/Alt 组合）。
- 必须用
addEventListener('keydown', handler, true)或至少确保捕获阶段能拦截（尤其对Ctrl+R这类浏览器默认行为） - 需要调用
e.preventDefault()阻止默认行为，否则像Ctrl+T会新开标签页、F5会刷新 - 判断组合键要用
e.ctrlKey、e.altKey、e.shiftKey、e.metaKey（Mac 的Cmd键），别只靠e.key或e.code
document.addEventListener('keydown', function(e) {
if (e.ctrlKey && e.key === 's') {
e.preventDefault();
console.log('Ctrl+S 被捕获：保存操作');
}
if (e.key === 'F12') {
e.preventDefault();
alert('F12 已禁用（仅示例）');
}
});
为什么 document.execCommand 不再适用快捷键绑定
这个 API 曾用于富文本编辑快捷键（如 Ctrl+B 加粗），但它在 HTML5 后已被废弃，Chrome 90+、Firefox 84+ 等主流浏览器已移除支持，调用会静默失败或抛出 TypeError。
如果你还在维护老项目并遇到 Uncaught TypeError: document.execCommand is not a function，说明浏览器已彻底下线该接口。
立即学习“前端免费学习笔记（深入）”；
- 替代方案是手动操作 DOM：获取选区（
window.getSelection()）、包装节点、插入或 - 现代编辑器（如 Slate、TipTap）都绕过
execCommand，改用自定义命令系统 - 快捷键逻辑仍可保留，只是执行体要重写，比如把
execCommand('bold')改成调用你自己的toggleBold()
如何避免快捷键与浏览器/操作系统冲突
不是所有按键组合都能被网页安全劫持。浏览器保留了大量快捷键（如 Ctrl+T、Cmd+Tab、Alt+F4），部分甚至无法通过 e.preventDefault() 阻止。
实操建议优先避开这些高危组合，而不是硬刚：
- 避免使用
Ctrl+T/Ctrl+W/Ctrl+R/F5/F12—— 它们要么被浏览器强占，要么触发安全限制 - Mac 下
Cmd键对应e.metaKey，不是e.ctrlKey；Windows/Linux 下Ctrl对应e.ctrlKey；两者逻辑要分开处理 - 测试时务必在无插件的隐身窗口运行，某些插件（如 Vim 插件）会提前拦截
Esc、j/k等键
React/Vue 项目里快捷键容易失效的三个原因
框架层抽象常掩盖底层事件流问题，导致快捷键“有时有效、有时没反应”。根本原因往往不是代码写错，而是生命周期或事件代理位置不对。
- 组件卸载后监听器没清除 → 内存泄漏 + 多个重复监听器竞争 → 快捷键响应多次或错乱
- 用
useEffect（React）或onMounted（Vue）绑定时，依赖数组为空但未清理 → 切换路由后旧监听仍在 - 在函数组件内定义
handleKeyDown却没加useCallback→ 每次渲染生成新函数，removeEventListener找不到原函数引用 → 清理失败
正确做法是在挂载时添加、卸载时移除，并确保函数引用稳定：
useEffect(() => {
const handler = (e) => {
if (e.ctrlKey && e.key === 'k') {
e.preventDefault();
openSearchPanel();
}
};
document.addEventListener('keydown', handler);
return () => document.removeEventListener('keydown', handler);
}, []);
实际部署时最容易被忽略的是：快捷键逻辑必须等 DOM 完全就绪后再启用，尤其是用 defer 加载脚本或 SSR 渲染的页面。DOMContentLoaded 之前绑定，可能因元素未挂载而漏掉初始按键；太晚绑定，又可能错过用户第一次操作。 
