Question

我尝试使用此代码来检测同时按下两个键盘箭头：

document.addEventListener('keydown', event => {

    if (event.keyCode === 38) {
        console.log('up Arrow')
    }

    if (event.keyCode === 39) {
        console.log('right Arrow')
    }

})

但这是行不通的，但是无论我多么努力尝试完全同时按下它们。

如何彻底解决此问题并检测两个按键何时按下？

Answer 1

每个事件只有一个keyCode。您必须跟踪向上和向下的键：

// if you keep both up and down keys down, you'll get a message
let downKeys = {}; // the set of keys currently down
document.addEventListener('keydown', event => {
    downKeys[event.keyCode] = true;
    if (downKeys[38] && downKeys[40]) {
       console.log("both down!");
    }
});
document.addEventListener('keyup', event => {
    downKeys[event.keyCode] = false;
});

（您必须进入整页才能测试此代码段）

Answer 2

在这里，我使用2个标志来检查您是否按住了键。

如果两个标志都为true，则表示您同时按住两个键。因此，您可以在条件内执行任何操作。

let holdKeyUp = false;
let holdKeyRight = false;

document.addEventListener('keydown', event => {

    if (event.keyCode === 38) {
        holdKeyUp = true;
    }

    if (event.keyCode === 39) {
        holdKeyRight = true;
    }
    
    if (holdKeyUp && holdKeyRight) {
        console.log("Both keys are pressed.");
    }

})

document.addEventListener('keyup', event => {

    if (event.keyCode === 38) {
        holdKeyUp = false;
    }

    if (event.keyCode === 39) {
        holdKeyRight = false;
    }

})

同时检测到两个键盘按键被按下

2 个答案: