如何在按键被按下时触发事件？

Posted 2021-03-19

我之前试过这段代码，但当我按住W时，它重复了这段代码，但我想，如果我按住它，它只会执行代码一。

window.addEventListener("keydown", checkKeyPressW, false);

var player = document.getElementById("player");

var leftMarginCounter = 0;
var bottomMarginCounter = 0;

var leftMarginCounterToString = "";

function checkKeyPressA_D(keyPressed) {
    if(keyPressed.keyCode == "97") {
        if(player.style.marginLeft != "0px") {
            leftMarginCounter = leftMarginCounter - 1;
            leftMarginCounterToString = leftMarginCounter.toString();
            leftMarginCounterToString = leftMarginCounterToString + "px";
            player.style.marginLeft = leftMarginCounterToString;
        }
    }
    else if(keyPressed.keyCode == "100") {
        if(player.style.marginLeft != "1316px") {
            leftMarginCounter = leftMarginCounter + 1;
            leftMarginCounterToString = leftMarginCounter.toString();
            leftMarginCounterToString = leftMarginCounterToString + "px";
            player.style.marginLeft = leftMarginCounterToString;
        }
    }
};

function checkKeyPressW(keyPressedW) {
    if(keyPressedW.keyCode == "87") {
        console.log("Pressed w");
    }
}

答案

JS演示。https:/jsfiddle.netutnqeLmf1

代码。

 window.addEventListener("keydown", checkKeyPressW,  {
      once : true
 });

从文件上看

once 表示监听器被添加后最多只能被调用一次的布尔值。如果为真，则监听器在被调用时将被自动删除。

编辑

如果你想避免在按键被按下时持续按键安慰，那么就把事件改为按键上键。

window.addEventListener("keyup", checkKeyPressW);

另一答案

有一个名为repeat的属性，如果键被按住，则返回true。

document.addEventListener('keydown', (event) => {
   if(event.repeat) {
      // key is being held down
   } else {
      // key is being pressed
   }
 });