单键代码与多键代码一起执行

Question

我正在尝试根据单个或多个箭头键按下事件在元素上放置一些基本的 jQuery 动画。 objective 是在 key/keys 被按下的方向上对元素进行动画处理。我已经按照 here 讨论的方法来检测多个按键。但是由于某种原因，当按下多个键时，任何键的单键按下代码与多键按下代码一起随机执行。但是如果我注释掉第 25-41 行的代码，多次按键事件将按预期工作。我不知道出了什么问题。

var key = [];
$(document).keydown(function(e) {
  key[e.which] = true;
}).keyup(function(e) {
  if (key[37] && key[38]) {
    $('.box').animate({
      'top': '-=50px',
      'left': '-=50px'
    }, 250);
  } else if (key[39] && key[40]) {
    $('.box').animate({
      'top': '+=50px',
      'left': '+=50px'
    }, 250);
  } else if (key[38] && key[39]) {
    $('.box').animate({
      'top': '-=50px',
      'left': '+=50px'
    }, 250);
  } else if (key[37] && key[40]) {
    $('.box').animate({
      'top': '+=50px',
      'left': '-=50px'
    }, 250);
  } else if (key[37]) {
    $('.box').animate({
      'left': '-=50px'
    }, 250);
  } else if (key[38]) {
    $('.box').animate({
      'top': '-=50px'
    }, 250);
  } else if (key[39]) {
    $('.box').animate({
      'left': '+=50px'
    }, 250);
  } else if (key[40]) {
    $('.box').animate({
      'top': '+=50px'
    }, 250);
  }
  key[e.which] = false;
});

* {
  margin: 0;
  padding: 0;
}
.container {
  border: 1px solid #ccc;
  height: 250px;
  margin: 49px;
  position: relative;
  width: 250px;
}
.box {
  background-color: #ccc;
  height: 50px;
  left: 50%;
  margin: -25px 0 0 -25px;
  position: absolute;
  top: 50%;
  width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="box"></div>
</div>

Answer 1

完成这些步骤后：

按下
向左按
向下发布

您的键数组包含键[37]（左）和键[40]（下）的真实值。当 keyup() 执行时，它将在您的第四个 if 语句中应用 animate()，但它只会清除 key[40]。然后，当您释放左键时，您的键数组仍然在键 [37] 处包含一个真值，因此 keyup() 在您的第五个 if 语句中应用 animate() 。这就是您看到多项操作的原因。

一个可能的解决方案是，如果执行前四个 if 语句之一，则清除键数组中的两个条目。这样做应该可以满足我将您的用户解释为与页面交互的方式，因为他们将同时按下和释放两个键。

单键代码与多键代码一起执行

Code for single keypress is executing along with multiple keypress code

javascript

jquery

keypress

jquery-animate