Question

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

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

基本的Javascript事件处理看起来不太可能，但肯定有人找到了解决/黑客/改进的方法。

Answer 1

以下是您在概念上需要做的事情（我猜这叫做伪代码）：

从这样的事情开始：

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的绝佳示例）：

function move() {
  var dot = document.getElementById('dot'),
      deltaX = rightPressed - leftPressed,
      deltaY = downPressed - upPressed;

  if(deltaX) {
    dot.style.left = (parseInt(dot.style.left, 10) || 0) + deltaX + 'px';
  }

  if (deltaY) {
    dot.style.top = (parseInt(dot.style.top, 10) || 0) + deltaY + 'px';
  }
}

浏览器将（应该）为每个键触发单独的keydown / keyup事件，即使它们是“同时”按下的。

工作示例

Crescent Fresh整理了full example on JSBin。请务必访问editable version以使用代码。

Answer 2

Javascript有onkeydown和onkeyup事件。您可以简单地为左箭头调整一下onkeydown，然后为向上箭头调整一点。在键盘上，将相应的位调整回来。

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);

Answer 3

也许你可以通过跟踪每个键的keydown和keyup事件来做到这一点，你就会知道是否同时持有两个键。

示例伪代码：

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

Answer 4

Javascript键盘事件在keypress和keydown上触发，但不包含额外的键掩码信息以确定是否同时按下了其他键。

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

4 个答案: