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

前端之家收集整理的这篇文章主要介绍了在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以及玩代码.

猜你在找的JavaScript相关文章