当用户按住 shift + 某键后先松开 shift 再松开另一键时，keyup 事件中 event.key 会返回 "shift" 而非实际按键，导致逻辑异常；本文提供基于按键状态追踪的可靠解决方案。
当用户按住 shift + 某键后先松开 shift 再松开另一键时，keyup 事件中 event.key 会返回 "shift" 而非实际按键，导致逻辑异常；本文提供基于按键状态追踪的可靠解决方案。
在 Web 开发中，keyup 事件的行为遵循底层操作系统与浏览器的键盘事件调度机制：事件触发顺序严格对应物理按键释放顺序。因此，当用户组合按下 Shift + A 后先释放 Shift，浏览器会立即派发 keyup 事件，此时 event.key === 'Shift' —— 此时 A 键仍处于按下状态，尚未触发其 keyup，因此无法通过该次事件获取 'A'。
直接依赖 event.key 在组合键释放场景下不可靠。正确做法是主动维护按键状态映射，而非被动等待事件携带的 key 值。以下是一个健壮、无重复、跨浏览器兼容的实现方案：
const pressedKeys = new Set();
document.addEventListener('keydown', (e) => {
// 防止重复添加（如长按触发多次 keydown）
if (!pressedKeys.has(e.key)) {
pressedKeys.add(e.key);
}
});
document.addEventListener('keyup', (e) => {
// 立即从状态集中移除已释放的键
pressedKeys.delete(e.key);
// 关键判断：若当前释放的是修饰键（如 Shift），且仍有其他键被按下
if (e.key === 'Shift' && pressedKeys.size > 0) {
// 此时 pressedKeys 中剩余的 key 即为「真正应被释放的主键」
const mainKey = [...pressedKeys][0]; // 或遍历全部（如支持多键同时释放）
console.log('主键释放检测：', mainKey); // 例如输出 'A', 'Enter', 'ArrowUp' 等
// ✅ 此处可安全执行业务逻辑，如触发快捷键响应
}
// 注意：此处不调用 pressedKeys.clear() —— 修正原示例错误！
// clear() 会清空所有状态，破坏多键并行判断逻辑，应仅 delete 当前键
});
✅ 核心要点说明：
- 使用
Set高效管理实时按键状态，O(1)增删查，避免数组重复或索引混乱； -
keydown中仅在未存在时添加，防止长按触发冗余； -
keyup中精准delete对应键，保持状态与物理按键严格同步； - 通过
pressedKeys.size > 0判断是否存在“悬停主键”，从而在 Shift 先释放时捕获真实目标键； - ❌ 原答案中的
pressedKeys.clear()是严重错误：它会清空整个状态集，导致后续多键组合（如 Ctrl+Alt+T）完全失效，必须删除。
? 进阶建议：
- 如需支持更多修饰键（
Ctrl、Alt、Meta），可扩展判断逻辑，但注意e.key在不同系统中对Control/Ctrl的返回差异，推荐优先使用e.code或e.ctrlKey等布尔属性； - 对于快捷键识别（如
Shift+Enter提交），应在keydown阶段结合e.shiftKey等属性综合判断，而非依赖keyup的event.key； - 若需精确处理快速连按或防抖，可为每个键添加时间戳，但本场景下状态集已足够轻量可靠。
该方案脱离了对 event.key 在 keyup 中“必然反映主键”的错误假设，转而以真实按键生命周期为依据，是构建健壮键盘交互逻辑的工业级实践。
