在Javascript中，如何判断用户是否同时按下两个键？

在Javascript中，如何判断用户是否同时按下两个键

例如，我在屏幕中间画了一个圆。我想在用户按住向上箭头时将其向上移动，在用户按住向右箭头时将其向右移动。那部分很容易。如果用户同时按住向上和向右箭头，我想沿对角线向上和向右移动圆

---

基本的Javascript事件处理看起来不可能做到这一点，但肯定有人找到了一个解决方法/hack/改进。

Javascript键盘事件在按键和按键时触发，但是不要包含额外的keymask信息来确定是否同时按下了其他键。

这里是概念上需要做的事情（我想这就是所谓的伪代码）：

从以下内容开始：

var PIXEL_DELTA  = 10; // Distance to move in pixels

var leftPressed  = 0,
    upPressed    = 0,
    downPressed  = 0,
    rightPressed = 0;

然后在每个

keydown

事件中，测试按下的键是否为

left

，

up

等，并将其变量从

0

转到

PIXEL_DELTA

在每个

keyup

事件上，运行相同的测试并将正确的变量返回到

0

然后，在移动代码中（真实代码）：（此代码改编自Crescent Fresh的精彩示例）：

浏览器将（应该）为每个键触发一个单独的

keydown

/

keydup

事件，即使它们“同时”按下

工作示例

---

新月形的新鲜拼凑成一个。请务必访问并使用代码。

也许您可以通过跟踪每个键的keydown和keydup事件来完成，这样您就可以知道是否同时按住了两个键

示例伪代码：

var keydown = {};

function onkeydown(event) {
   keydown[event.key] = true;
}

function onkeyup(event) {
   keydown[event.key] = false;
}

// in some function at some other places

if (keydown['up'] && keydown['right']) {
  move_diagonal('up', 'right');
}
elseif (keydown['up'] && keydown['left']) {
  move_diagonal('up', 'left');
}
elseif .. blah blah

---

Javascript有onkeydown和onkeydup事件。您可以简单地为左箭头按一下键，为向上箭头按一下键。在键控时，将相应的位拨回

var leftPressed,
    upPressed,
    rightPressed,
    downPressed;

var milli = 100;

window.addEventListener('onkeydown', function(e) {
    switch(e.keycode) {
        case 37: //left
            leftPressed = true;
        case 38: //up
            upPressed = true;
        case 39: //right
           rightPressed = true;
        case 40: //down
            downPressed = true;
        default:
            break;
    }
});

window.addEventListener('onkeyup', function(e) {
    switch(e.keycode) {
        case 37: //left
            leftPressed = false;
        case 38: //up
            upPressed = false;
        case 39: //right
           rightPressed = false;
        case 40: //down
            downPressed = false;
        default:
            break;
    }

});

function moveCircle() {
    if(leftPressed && !rightPressed) {
        // move left
    }
    if(rightPressed && !leftPressed) {
        // move right
    }
    if(upPressed && !downPressed) {
        // move up
    }
    if(downPressed && !upPressed) {
        // move down
    }
}

setInterval(moveCircle, milli);

---

你如何用JavaScript在屏幕中间画圆？如果您使用一些库，请指定它，密钥处理应该在该库中完成。我不认为它提供了任何关键的输入功能。我认为你的一般想法会奏效，但我认为这段代码不会。如果按下钥匙，则会重复发送钥匙按下消息。我不想把圆移回到键上。我想停止移动它。你是对的，我可能把onkeydown和onkeypress搞错了。但是，onkeyup部分将停止向该方向移动。在左下角，dx变为-1。提起它时，dx+1再次变为0。@seanmonstar:但您仍然无法自动重新执行keydown事件。它不像Chrome/Safari/IE为箭头键触发keypress事件。

keydown

是正确的事件，正如@BlueWaldo所指出的。我想你最好把你感兴趣的键的上/下状态存储为布尔值。是的，但我会使用数字在

0

（你的假）和

n

（你的真）之间切换，其中

n

是像素增量。移动代码不需要测试布尔值，只需要做一些基本的算术。非psuedo代码：@Crescent，我喜欢它。如果您不想发布自己的答案，我将更新我的答案，但您确实应该这样做，因为这是一个很好的解决方案，而且您有一个工作演示。@DN:不客气，您已经搞定了。

var leftPressed,
    upPressed,
    rightPressed,
    downPressed;

var milli = 100;

window.addEventListener('onkeydown', function(e) {
    switch(e.keycode) {
        case 37: //left
            leftPressed = true;
        case 38: //up
            upPressed = true;
        case 39: //right
           rightPressed = true;
        case 40: //down
            downPressed = true;
        default:
            break;
    }
});

window.addEventListener('onkeyup', function(e) {
    switch(e.keycode) {
        case 37: //left
            leftPressed = false;
        case 38: //up
            upPressed = false;
        case 39: //right
           rightPressed = false;
        case 40: //down
            downPressed = false;
        default:
            break;
    }

});

function moveCircle() {
    if(leftPressed && !rightPressed) {
        // move left
    }
    if(rightPressed && !leftPressed) {
        // move right
    }
    if(upPressed && !downPressed) {
        // move up
    }
    if(downPressed && !upPressed) {
        // move down
    }
}

setInterval(moveCircle, milli);