JavaScript键盘keydown/keyup事件丢失及数组未清空问题排查

咱们先拆解你遇到的两个核心问题：部分keydown/keyup事件丢失，以及窗口失焦后键盘数组没清空，再对应给出修复方案。

一、事件丢失的可能原因及修复 #

你的代码逻辑框架没问题，但几个细节容易导致事件“失踪”：

1. e.repeat的局限性 #

e.repeat用来判断是否是按住按键触发的重复事件，但它不是所有场景都能可靠工作：

• 某些浏览器对快速连续按键的repeat识别有延迟
• 特殊修饰键（比如Alt、Ctrl）的repeat行为和普通按键不一致，容易误判

2. keyCode的兼容性隐患 #

keyCode已经是废弃API，部分新浏览器对特殊按键（比如 emoji 键盘、非英语输入法按键）的返回值不稳定，会导致indexOf匹配失败，误以为是重复按键而跳过发送。

3. 事件冒泡被拦截 #

如果页面内有其他元素（比如表单输入框、自定义组件）调用了e.stopPropagation()或e.preventDefault()，会阻止键盘事件冒泡到window层面，你的监听函数根本不会触发。

对应修复方案 #

• 替换keyCode为标准的e.code（代表物理按键位置，不受输入法/语言影响）或e.key（代表按键输出的字符）
• 优化重复按键判断逻辑，不要完全依赖e.repeat，结合集合的存在性判断更可靠
• 给事件监听添加capture: true选项，确保即使子元素拦截冒泡，window也能捕获到事件

二、窗口失焦后数组未清空的原因 #

你用window.onblur重置数组，但这个事件并非在所有失焦场景都会触发：

• 当浏览器的地址栏/控制台获得焦点，或者页面内iframe获取焦点时，部分浏览器不会触发window的blur事件
• 快速切换标签页时，blur事件可能存在触发延迟甚至丢失的情况

对应修复方案 #

• 同时监听window.onfocusout事件（触发范围更广，只要页面内任何元素失去焦点都会触发）
• 给数组重置加兜底逻辑：每次keydown触发前，先检查窗口是否激活，未激活则直接清空数组

改进后的完整代码 #

// 用Set替代数组，判断存在性和删除操作效率更高
let keySet = new Set();

// 通用的按键集合重置函数
const resetKeySet = () => {
  keySet.clear();
  // websocket.send(/* 失焦通知 */);
};

// 监听键盘按下事件
window.addEventListener('keydown', (e) => {
  // 先检查窗口是否激活，未激活则重置集合
  if (!document.hasFocus()) {
    resetKeySet();
    return;
  }

  const keyIdentifier = e.code;
  if (!keySet.has(keyIdentifier)) {
    keySet.add(keyIdentifier);
    // websocket.send(keyIdentifier);
  }
}, { capture: true }); // 捕获阶段监听，避免被子元素拦截冒泡

// 监听键盘松开事件
window.addEventListener('keyup', (e) => {
  const keyIdentifier = e.code;
  if (keySet.has(keyIdentifier)) {
    keySet.delete(keyIdentifier);
    // websocket.send(keyIdentifier);
  }
}, { capture: true });

// 同时监听blur和focusout，确保集合被重置
window.addEventListener('blur', resetKeySet);
window.addEventListener('focusout', resetKeySet);

额外优化建议 #

• 可以给websocket发送事件加个防抖，避免短时间内发送大量重复消息（比如快速按键场景）
• 如果需要支持多语言输入法场景，建议优先使用e.code，它代表物理按键位置，不会受输入法字符转换影响

内容的提问来源于stack exchange，提问作者fnclovers