Chrome多按键操作下keydown事件触发顺序异常问题求助

在Chrome浏览器中按特定顺序按下并释放多个按键时，会出现keydown事件晚于对应keyup事件触发的异常，Firefox则无此问题。当前代码通过if (e.repeat) return抑制按键长按重复触发，但该逻辑可能是导致异常的诱因。

原测试代码：

window.addEventListener('keydown', (e) => {
    if (e.repeat) return
    console.log(e.key, 'pressed')
})

window.addEventListener('keyup', (e) => {
    console.log(e.key, 'released')
})

问题原因 #

Chrome在处理多按键快速切换时，已标记为repeat的按键后续keydown事件可能被延迟触发。若此时提前释放按键，keyup会先触发，延迟的keydown才到来，导致事件顺序颠倒。单纯依赖e.repeat无法覆盖这种边界场景。

修复方案：自主维护按键状态集合 #

放弃仅依赖e.repeat的判断，改用Set手动追踪每个按键的按下状态，精准控制事件逻辑：

const pressedKeys = new Set();

window.addEventListener('keydown', (e) => {
    if (pressedKeys.has(e.key)) return;
    pressedKeys.add(e.key);
    console.log(e.key, 'pressed');
});

window.addEventListener('keyup', (e) => {
    pressedKeys.delete(e.key);
    console.log(e.key, 'released');
});

该方案通过自主管理按键状态，完全规避了浏览器e.repeat标记带来的事件顺序问题，同时能有效抑制长按重复触发。

更优的长按重复控制方案 #

如果需要区分首次按下和长按重复触发的场景，可以结合状态集合与e.repeat实现精细化控制：

const pressedKeys = new Set();

window.addEventListener('keydown', (e) => {
    if (!pressedKeys.has(e.key)) {
        pressedKeys.add(e.key);
        console.log(e.key, 'pressed (首次触发)');
    } else if (e.repeat) {
        console.log(e.key, 'pressed (长按重复)');
        // 这里可添加自定义的长按重复逻辑，比如按固定间隔执行操作
    }
});

window.addEventListener('keyup', (e) => {
    pressedKeys.delete(e.key);
    console.log(e.key, 'released');
});

这种方式既保留了对不同触发场景的区分能力，又通过状态集合确保了按键状态的准确性，不会因浏览器事件顺序异常导致逻辑混乱。

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