javascript - 重叠关键事件

Question

为了好玩，我正在做一个 HTML/JavaScript/CSS3 小元素。我基本上是在尝试制作一个在浏览器窗口中滚动的轮子。为了控制滚轮，我使用了光标键的 keyup 和 keydown 事件(左右转动滚轮并向上和向下向前或向后滚动)。

到目前为止，它运行良好，但存在两个主要问题。假设我想向前滚动轮子并且不停地想向右转动一点，那么我会按住向上键并按下右光标键。当我这样做时，运动会暂停，然后它会记录这两个事件并继续滚动。

这是问题之一，主要问题是，一旦我执行了上一个操作，然后滚轮处于理想的 Angular ，如果我松开右光标键，浏览器会将这两个键注册为已释放和车轮静止不动。这是它的外观的 jsFiddle:http://jsfiddle.net/UKqwu/1/ .我知道代码一团糟，但这是一项正在进行的工作/学习经验，我只编程了一个月左右。

无论如何，感谢您的帮助。据我所知，它目前只能在 Chrome 中使用。在此阶段还没有真正费心解决兼容性问题。

Answer 1

所以，发生的事情本质上是操作系统内置的限制，但有一个简单的解决方法。首先，我将解释限制，然后解释解决方法。

如果你(在文本框中)按住“j”按钮，第一个“j”会出现，然后在短暂的延迟后许多“j”会出现“jjjjjjjjjjjjjjjjjjjjj”

这与您遇到的问题相同。该事件触发一次，等待片刻，然后触发多次。

然而，解决方案很简单。不要让你的轮子在事件触发时移动......让它不断更新，并分别跟踪哪些键是向上或向下。

key 处理程序看起来像这样......

function KeyHandler() {
  this.left = false;
  this.right= false;
  ...
  function onKeyDown(e) {
    if (e.keyCode == 37) {
      this.left = true;
    }
    ...
  }
  function onKeyUp(e) {
    if (e.keyCode == 37) {
      this.left = false;
    }
    ...
  }
}

(您可以将 key 处理程序附加到正文或您希望的任何元素)

你的轮子会有一个更新功能，看起来像......

wheel.update = function() {
  // the wheel is turning left
  if (wheel.keyhandler.left) {
    // make the appropriate adjustments
  }
}

然后游戏会有这样的东西......

wheel = new Wheel;
setInterval(function() {
  wheel.update();
},100);

这样一来，您的滚轮将始终根据按键的当前状态进行更新，而您不必依赖正在触发的事件的限制。 :)