Question

我创建了一个带有jquery动画的div，如下所示：

$("body").keydown(function (Taste) {

var figPosNow = $("#figur").css("top");
var figPosNowInt = parseInt(figPosNow);
var changePos = 0;

if (Taste.keyCode == 38) {

    changePos -= 100;
    Taste.preventDefault();

}

var newFigPos = (figPosNowInt + changePos) + "px";

$("#figur").animate({top: newFigPos}, 200).animate({top: figPosNow}, 200);
});

问题是当你按下按钮时功能不断加起来，即使你松开按钮它们仍然都会运行。

是否可以声明在按住键时动画永远不会运行，但只有在按下它时才能运行？

Answer 1

您可以使用.keyup()代替;或

var i = 1;

$("body").keyup(function (Taste) {
    console.clear();
    console.log(i + " key.");
    i++;
});

#figur{
  width: 100px;
  height: 100px;
  background-color: indigo;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <div id="figur"></div>

</body>

如果您真的需要.keydown()，则可以使用flag（.keyup()触发和.focus()，如果有必要，返回原始值）

var i = 1, allow = true;

$("body").keydown(function(Taste){
    if(allow){
      console.clear();
      console.log(i + " key.");
      i++;
      allow = false;
    }
});

$("body").keyup(function(e){
    allow = true;
});

$("body").focus(function(e){
    allow = true;
});

#figur{
  width: 100px;
  height: 100px;
  background-color: indigo;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <div id="figur"></div>

</body>

Answer 2

您可以将事件更改为keyup或keypress，或者您需要为该键保持关闭标记，仅在密钥未关闭时运行代码，并重置keyup上的标记。

var keyDown = false;

$("body").keydown(function (Taste) {
    if (Taste.keyCode == 38) {
      keyDown = true;
      Taste.preventDefault();

      var figPosNow = $("#figur").css("top");
      var figPosNowInt = parseInt(figPosNow);
      var changePos = -100;
      var newFigPos = (figPosNowInt + changePos) + "px";

      $("#figur").animate({top: newFigPos}, 200).animate({top: figPosNow}, 200);
    }
  }
});

$("body").keyup(function (Taste) {
  if (Taste.keyCode == 38) {
    keyDown = false;
  }
});

jquery keydown函数禁用keydown时运行

2 个答案: