如何解决单次按键触发多次keydown事件的问题

这是操作系统默认的按键重复行为——按住按键时，系统会持续触发keydown事件，直到你松开按键。要实现单次按键只触发一次位置更新，可以通过记录按键状态来避免重复处理：

修正后的代码方案 #

// 用集合存储当前处于按下状态的按键
const pressedKeys = new Set();

window.addEventListener('keydown', e => {
    if (renderBall && !pressedKeys.has(e.key)) {
        pressedKeys.add(e.key);
        
        if (e.key === 'ArrowLeft') {
            setBallPosition({
                ...ballPosition,
                left: parseInt(ballPosition.left) - 5 + 'px',
            });
        } else if (e.key === 'ArrowUp') {
            setBallPosition({
                ...ballPosition,
                top: parseInt(ballPosition.top) - 5 + 'px',
            });
        } else if (e.key === 'ArrowRight') {
            setBallPosition({
                ...ballPosition,
                left: parseInt(ballPosition.left) + 5 + 'px',
            });
        } else if (e.key === 'ArrowDown') {
            setBallPosition({
                ...ballPosition,
                top: parseInt(ballPosition.top) + 5 + 'px',
            });
        }
    }
});

// 按键松开时，从集合中移除对应按键
window.addEventListener('keyup', e => {
    pressedKeys.delete(e.key);
});

关键说明 #

1. 状态记录：用Set存储当前按住的按键，确保同一个按键的keydown事件只有第一次会被处理
2. 修正逻辑漏洞：把原代码中ArrowDown的if改为else if，避免和前面的条件分支冲突导致重复执行
3. 重置状态：通过keyup事件移除集合中的按键，保证下次按下时能正常触发

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