onkeyup与onkeydown交替按键释放时异常的原因及是否可规避咨询

执行以下操作序列：

1. 按住Shift以外的按键（例如Alt）
2. 按住Shift
3. 松开步骤1中按住的按键
4. 松开Shift

会导致“其他按键”保持着色状态，仿佛对应的style.background = 'none'代码行未执行。实际测试中，控制台未打印“Alt up”信息，但确实是在按住Shift后、松开Shift前释放了Alt。

此外在其他系统测试时，Shift并非唯一触发该问题的按键，使用Ctrl搭配方向键等按键也会出现相同现象。

这是操作系统/浏览器的键盘事件捕获机制导致的：
当按住修饰键（如Shift/Ctrl/Alt）的同时松开另一个按键时，部分场景下浏览器不会单独触发被松开按键的keyup事件，而是会等到最后一个修饰键松开时，才会统一处理相关事件。

对应到你的代码逻辑：

1. 按住Alt时，触发keydown，Alt元素变绿
2. 按住Shift时，触发keydown，Shift元素变绿
3. 松开Alt时，此时Shift仍处于按住状态，浏览器未触发Alt的keyup事件，因此控制台无“Alt up”输出，重置背景色的代码也未执行
4. 松开Shift时，触发Shift的keyup，但此时e.altKey已为false（Alt早已松开），代码里的if(e.altKey)判断不成立，Alt的背景色无法被重置

不能依赖单个keyup事件里的e.altKey/e.ctrlKey/e.shiftKey判断状态，需要维护一份自定义的按键状态跟踪表，实时更新每个按键的按下/松开状态，再根据状态统一更新UI：

修改后的JavaScript代码 #

// 维护按键状态表
const keyStates = {
  Alt: false,
  Ctrl: false,
  Shift: false,
  End: false,
  Home: false,
  ArrowUp: false,
  ArrowLeft: false,
  ArrowDown: false,
  ArrowRight: false
};

window.onkeydown = listenKeyDown;
window.onkeyup = listenKeyUp;

function listenKeyDown(e) {
  // 更新状态为按下
  if (keyStates.hasOwnProperty(e.key)) {
    keyStates[e.key] = true;
    updateKeyUI();
    console.log(e.key + " down");
  }
}

function listenKeyUp(e) {
  // 更新状态为松开
  if (keyStates.hasOwnProperty(e.key)) {
    keyStates[e.key] = false;
    updateKeyUI();
    console.log(e.key + " up");
  }
}

// 根据状态统一更新UI
function updateKeyUI() {
  Object.keys(keyStates).forEach(key => {
    const elemId = key.toLowerCase() === 'ctrl' ? 'ctrl' : key;
    const elem = document.getElementById(elemId);
    if (elem) {
      elem.style.background = keyStates[key] ? '#00ff00' : 'none';
    }
  });
}

方案优势 #

不管浏览器是否延迟触发keyup事件，只要按键实际被松开，对应的keyup最终都会触发（哪怕和修饰键的keyup一起）。通过状态表统一跟踪每个按键的状态，再批量更新UI，就能保证UI与实际按键状态完全一致。

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