Chrome中ES6+Babel环境下keydown事件多键按住异常排查

嘿，我来帮你搞定这个多键按住的问题！先看看你的代码，再一步步拆解问题：

window.hold = []; 
window.addEventListener('keydown', (e) => { 
  if (!window.hold.includes(e.key)) { 
    setTimeout(() => { 
      console.log("> - " + e.key); 
      window.hold.push(e.key); 
    }, 0); 
  } else { 
    e.preventDefault(); 
  } 
}); 
window.addEventListener('keyup', (e) => { 
  setTimeout(() => { 
    console.log("< - " + e.key); 
    window.hold.splice(window.hold.indexOf(e.key), 1); 
    e.preventDefault(); 
  }, 0); 
});

问题成因 #

1. 异步回调导致的状态不同步 #

你用了setTimeout(() => {}, 0)延迟更新hold数组，但这个异步回调会被放到事件循环末尾执行。当快速按住多个键（比如ASDZ）时，多个keydown事件会先同步触发，此时hold数组还没被前一个回调更新，导致后续的!window.hold.includes(e.key)判断出错，要么重复添加同一个键，要么漏掉阻止默认行为。

2. 键盘硬件的「按键冲突（Ghosting）」 #

普通薄膜键盘的键位是矩阵布线的，当同时按下多个特定组合的键时，键盘会无法正确识别所有按键，甚至误触发其他键——这是硬件层面的限制，像ASDZ这类相邻的键组合，很容易触发冲突，导致浏览器收到重复的keydown或错误的按键事件。

3. 不必要的e.preventDefault() #

在keyup事件里调用e.preventDefault()完全没必要，它不会影响按键按住的行为，反而可能干扰正常的事件流程；而keydown里的阻止逻辑因为异步的问题，也没在正确时机生效。

修复方案 #

第一步：移除异步回调，同步处理数组 #

把setTimeout去掉，直接在事件回调里同步更新hold数组，保证数组状态和事件触发完全同步：

window.hold = []; 
window.addEventListener('keydown', (e) => { 
  if (!window.hold.includes(e.key)) { 
    console.log("> - " + e.key); 
    window.hold.push(e.key); 
  } else { 
    // 阻止重复的keydown事件默认行为（比如重复输入字符）
    e.preventDefault(); 
  } 
}); 
window.addEventListener('keyup', (e) => { 
  const keyIndex = window.hold.indexOf(e.key);
  if (keyIndex !== -1) {
    console.log("< - " + e.key); 
    window.hold.splice(keyIndex, 1); 
  }
  // 移除keyup里的preventDefault，不需要阻止这个事件的默认行为
});

第二步：兼容硬件按键冲突 #

如果是硬件层面的按键冲突，软件只能做容错处理：比如忽略重复的keydown事件（即使键盘触发了），或者在日志里标记可能的冲突。另外，换一把全键无冲的机械键盘能彻底解决硬件层面的问题。

额外优化：用Set代替数组提升性能 #

数组的includes和indexOf都是O(n)的操作，用Set存储按住的键，判断和删除的效率会更高：

window.hold = new Set(); 
window.addEventListener('keydown', (e) => { 
  if (!window.hold.has(e.key)) { 
    console.log("> - " + e.key); 
    window.hold.add(e.key); 
  } else { 
    e.preventDefault(); 
  } 
}); 
window.addEventListener('keyup', (e) => { 
  if (window.hold.has(e.key)) {
    console.log("< - " + e.key); 
    window.hold.delete(e.key); 
  }
});

这样修改后，多键按住的同步问题应该就能解决了，硬件冲突的话可以按上面的建议处理~

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