Question

我正在尝试基于单个或多个箭头按键事件在元素上放置一些基本的jQuery动画。目标是在按下的键/键的方向上为元素设置动画。我已经按照已经讨论过的方法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（），但它只会清除键[40]。然后，当你释放左键时，你的键数组仍然在键[37]中包含一个真值，因此keyup（）在你的第五个if语句中应用animate（）。这就是为什么你会看到多个动作。

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

单键按键的代码与多个按键代码一起执行

1 个答案: