JavaScript 如何使按键被按下时触发按键事件

在JavaScript中，按住一个键会持续触发按键事件，直到释放。这种行为可以在应用程序中使用，例如游戏中可能期望按键仅触发一次，即使按住不放。可以通过两种方法实现这一目标：

方法1：使用标志变量检查当前按键状态

定义一个标志变量来跟踪当前按键的按下状态。’keyup’和’keydown’事件都被设置为修改这个标志变量，以正确反映按键的当前状态。

只有当键未被按下时，’keydown’事件才允许触发相应的事件，通过检查标志变量。另一方面，’keyup’事件设置标志变量来指示按键已被释放。通过使用这两个事件监听器，可以确保按键即使被按住也只触发一次。

语法：

let isPressed = false;

element.onkeydown = function (e) {
    if (!isPressed) {
        isPressed = true;
        console.log('Key Fired!');
    }
};

element.onkeyup = function (e) {
    isPressed = false;
}

示例:

<body>     
    <h1 style="color: green"> 
        GeeksforGeeks 
    </h1> 
      
    <b> 
        How to make a key fire only 
        once when pressed? 
    </b> 
      
    <p> 
        Press any button and observe 
        the logs to verify that a key 
        only fires once. 
    </p> 
      
    <input type="text"> 
      
    <script type="text/javascript"> 
        let element = document.querySelector('input'); 
        let isPressed = false; 
          
        element.onkeydown = function (e) { 
            if (!isPressed) { 
                isPressed = true; 
                console.log('Key Fired!'); 
            } 
        }; 
              
        element.onkeyup = function (e) { 
            isPressed = false; 
        } 
    </script> 
</body>

输出：

JavaScript 如何使按键被按下时触发按键事件

方法2：使用repeat属性

‘repeat’属性是KeyboardEvent接口中的一个属性，用于检查用户长按某个键时是否会导致键盘事件重复触发。可以在每个‘keydown’事件中检查该属性，并仅在返回false时触发指定事件。这样即使用户长按键盘，也只会触发一次事件。

语法：

element.onkeydown = function (e) {
    if (!e.repeat) {
        console.log("Key Fired!");
    }
};

示例：

<body> 
    <h1 style="color: green"> 
        GeeksforGeeks 
    </h1> 
      
    <b> 
        How to make a key fire only 
        once when pressed? 
    </b> 
      
    <p> 
        Press any button and observe 
        the logs to verify that a key 
        only fires once. 
    </p> 
      
    <input type="text"> 
      
    <script type="text/javascript"> 
        let element = 
            document.querySelector('input'); 
              
        element.onkeydown = function (e) { 
            if (!e.repeat) { 
                console.log("Key Fired!"); 
            } 
        }; 
    </script> 
 </body>

输出：

JavaScript 如何使按键被按下时触发按键事件