应在document上监听keydown事件并调用e.preventDefault()阻止默认行为，结合ctrlKey/metaKey等属性准确识别组合键，且需判断activeElement是否处于可编辑状态以避免干扰用户输入。
在父元素中捕获所有子元素的键盘快捷键（如 Ctrl+S、Alt+F4 等），关键不是依赖事件冒泡本身——因为 keydown 和 keyup 默认就支持冒泡，但要注意：浏览器对某些组合键有默认行为（如 Ctrl+R 刷新、F5 重载），会阻止事件继续传播或触发。所以重点在于：在合适的层级监听、及时阻止默认行为、正确识别组合键。
在父容器上监听 keydown 并阻止默认行为
键盘事件（keydown、keyup）天然支持冒泡，只要子元素没有调用 e.stopImmediatePropagation() 或 e.stopPropagation()，事件就会逐层向上到达父元素。因此，你只需在父元素（比如 document 或某个 div#app）上监听 keydown 即可捕获所有后代元素触发的按键。
- 推荐监听
document—— 它是全局最稳妥的捕获点，避免因焦点不在具体父容器内而漏掉事件 - 必须在回调中调用
e.preventDefault()，否则像Ctrl+T（新建标签页）、Ctrl+W（关闭标签页）等会被浏览器直接拦截，你的逻辑根本收不到 - 注意：不要在
input、textarea等可编辑元素中无差别阻止默认行为，否则用户无法正常输入；应先判断是否处于编辑状态
准确识别快捷键组合（Ctrl/Alt/Shift/Meta + 键）
不能只靠 e.key 或 e.code，必须结合修饰键属性判断。例如 Ctrl+S 对应 e.ctrlKey && e.key === 's'（注意大小写不敏感，建议统一转小写比较）。
-
e.ctrlKey：检测 Ctrl（Windows/Linux）或 ⌘（macOS） -
e.metaKey：macOS 下通常对应 ⌘，Windows 下部分浏览器可能也响应，建议优先用metaKey || ctrlKey兼容双平台 -
e.altKey、e.shiftKey同理 - 避免用
e.keyCode（已废弃）或e.which；优先使用e.key（语义化，如'Enter'、's'）或e.code（物理键位，如'KeyS'、'Enter'）
排除输入框等干扰场景（聚焦时慎用快捷键）
当用户正在 input、textarea、contenteditable 元素中输入时，多数快捷键应被忽略（除非你明确支持“在编辑器中保存”这类功能）。可通过以下方式判断：
立即学习“Java免费学习笔记（深入）”；
- 检查
document.activeElement是否为可编辑元素：['INPUT', 'TEXTAREA', 'SELECT'].includes(active.tagName) - 或更通用：检查
active.isContentEditable || active.hasAttribute('contenteditable') - 若处于编辑状态，且当前快捷键不是专为编辑设计（如 Ctrl+Z 撤销），则直接
return，不执行后续逻辑
示例：在 document 上统一管理快捷键
下面是一个轻量实用的注册方式：
// 注册快捷键处理器
function registerShortcut(keys, callback) {
document.addEventListener('keydown', (e) => {
// 忽略可编辑区域中的快捷键（除非显式允许）
const active = document.activeElement;
const isEditing = ['INPUT', 'TEXTAREA', 'SELECT'].includes(active?.tagName) ||
active?.isContentEditable;
if (isEditing && !keys.allowInEditing) return;
// 检查组合键是否匹配（支持 Ctrl/Cmd + S, Alt + F4 等）
const match =
(keys.ctrl || keys.meta ? (e.ctrlKey || e.metaKey) : true) &&
(keys.alt ? e.altKey : true) &&
(keys.shift ? e.shiftKey : true) &&
(keys.key ? e.key.toLowerCase() === keys.key.toLowerCase() : false);
if (match) {
e.preventDefault(); // 阻止浏览器默认行为
callback(e);
}
});
}
// 使用示例
registerShortcut({ ctrl: true, key: 's' }, () => console.log('保存'));
registerShortcut({ alt: true, key: 'F4' }, () => console.log('关闭面板'));
registerShortcut({
meta: true,
shift: true,
key: 'C'
}, () => console.log('打开控制台'), { allowInEditing: true });
