javascript - JS 键盘记录器未正确接受 keyup

Question

我对 JS 还很陌生，所以我可能会犯一些愚蠢的错误，但我的键盘记录器似乎无法正常工作。它正确地接受多个击键，但当释放一个击键时，它会将这两个击键识别为“向上”。有什么帮助吗？

这是我的代码:

var keymap = {};

onkeydown = onkeyup = function(e){
    keymap[e.keyCode] = e.type == 'keydown';

    if(keymap[39] && keymap[32]){ // Right+Space
        jumpRight();

    }

    if(keymap[37] && keymap[32]){ // Left+Space
        jumpLeft();

    }

    if(keymap[32]){ // Space
        jump();

    }

    if(keymap[39]){ // Right
        right();

    }

    if(keymap[37]){ // Left
        left();

    }
}

我正在使用 Google Chrome，如果这有帮助的话。

谢谢!

Answer 1

我认为它正确识别击键，因为数组正在正确更新。问题是你的函数(left()、right()、jump()等)仅在按键事件时触发发生。当您按住某个键时，有时它会继续触发 keydown 事件，有时则不会。这会导致函数不会触发，即使您的程序知道该键被按住。

工作示例(始终显示数组值，而不仅仅是按键时；显示的数组值并不一定意味着函数会触发):

var keymap = {};

onkeydown = onkeyup = function(e){
    keymap[e.keyCode] = e.type == 'keydown';

    if(keymap[39] && keymap[32]){ // Right+Space
        jumpRight();

    }

    if(keymap[37] && keymap[32]){ // Left+Space
        jumpLeft();

    }

    if(keymap[32]){ // Space
        jump();

    }

    if(keymap[39]){ // Right
        right();

    }

    if(keymap[37]){ // Left
        left();

    }
}

document.onkeydown=onkeydown;
document.onkeyup=onkeyup;

function jump(){}
function left(){}
function right(){}
function jumpLeft(){}
function jumpRight(){}

setInterval(function(){console.log(keymap[37]," ",keymap[32]," ",keymap[39]);},5);

非工作示例(现在的情况是，仅在按键时显示数组值；显示的数组值 == 函数触发):

var keymap = {};

onkeydown = onkeyup = function(e){
    keymap[e.keyCode] = e.type == 'keydown';

    if(keymap[39] && keymap[32]){ // Right+Space
        jumpRight();

    }

    if(keymap[37] && keymap[32]){ // Left+Space
        jumpLeft();

    }

    if(keymap[32]){ // Space
        jump();

    }

    if(keymap[39]){ // Right
        right();

    }

    if(keymap[37]){ // Left
        left();

    }
}

document.onkeydown=onkeydown;
document.onkeyup=onkeyup;

function jump(){console.log("jump");}
function left(){console.log("left");}
function right(){console.log("right");}
function jumpLeft(){console.log("jumpleft");}
function jumpRight(){console.log("jumpright");}

请注意，在非工作示例中，日志记录仅发生在 keydown 事件上，即调用您的函数时。在“工作”示例中，无论关键事件如何，日志记录都会发生，但您的函数仍然无法触发，因为当关键事件发生时它们仍然会发生。这是一个完整的工作示例:

var keymap = {};

onkeydown = onkeyup = function(e){
    keymap[e.keyCode] = e.type == 'keydown';
}

document.onkeydown=onkeydown;
document.onkeyup=onkeyup;

function jump(){console.log("jump");}
function left(){console.log("left");}
function right(){console.log("right");}
function jumpLeft(){console.log("jumpleft");}
function jumpRight(){console.log("jumpright");}

function main(){
    if(keymap[39] && keymap[32]){ // Right+Space
        jumpRight();

    }

    if(keymap[37] && keymap[32]){ // Left+Space
        jumpLeft();

    }

    if(keymap[32]){ // Space
        jump();

    }

    if(keymap[39]){ // Right
        right();

    }

    if(keymap[37]){ // Left
        left();

    }
}

setInterval(main,250);

希望这有帮助!

祝你学习更多 JS 好运!

P.S.:您将 left() 标记为“空格”。 :P