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

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

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

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

解决方法

这是你在概念上需要做的事情(我猜这叫做伪代码)：

从这样的事情开始：

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

var leftpressed  = 0,uppressed    = 0,downpressed  = 0,rightpressed = 0;

然后在每个keydown事件中,测试按下的键是否保持向上,向上等,并将其变量从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以及玩代码.