JavaScript中keyup事件：先松Shift再松按键无法获取对应event.key的解决方法

你遇到的这个情况，大概率是没跟踪按键的按下状态，混淆了事件触发顺序导致的。正常情况下，先松Shift再松目标按键时，目标按键的keyup事件应该能正确返回对应event.key，如果出现异常，可以通过以下方法解决：

• 维护一个实时跟踪按下按键的集合，在keydown时记录按键，keyup时移除并识别当前松开的键：

  const activeKeys = new Set();
  
  document.addEventListener('keydown', (e) => {
    activeKeys.add(e.key.toLowerCase());
  });
  
  document.addEventListener('keyup', (e) => {
    const releasedKey = e.key.toLowerCase();
    activeKeys.delete(releasedKey);
    // 此处可准确获取当前松开的按键
    console.log('松开的按键:', releasedKey);
  });
  

• 如果需要识别曾与Shift组合的按键，可以额外记录组合状态：

  const shiftCombinedKeys = new Set();
  
  document.addEventListener('keydown', (e) => {
    // 按下目标键时若Shift处于按下状态，记录该键为Shift组合键
    if (e.shiftKey) {
      shiftCombinedKeys.add(e.key.toLowerCase());
    }
  });
  
  document.addEventListener('keyup', (e) => {
    const key = e.key.toLowerCase();
    if (shiftCombinedKeys.has(key)) {
      console.log('松开的是Shift组合键:', key);
      shiftCombinedKeys.delete(key);
    }
  });
  

如果依然出现event.key返回"shift"的异常，检查是否有其他代码干扰了事件处理，比如阻止事件传播或错误覆盖了事件对象。

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