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

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

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

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

从概念上讲，这是您需要做的（我想这称为伪代码）：

从这样的事情开始：

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

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

然后在每个keydown事件，测试按下的键是否为left, up等并将其变量从0 to 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 汇集了JSBin 上的完整示例 http://jsbin.com/iloxi。请务必参观可编辑版本 http://jsbin.com/iloxi/edit以及玩代码。