按下按钮后空格键事件侦听器停止答案

【问题标题】：Spacebar Event Listener stops after button press按下按钮后空格键事件侦听器停止
【发布时间】：2022-07-08 01:02:22
【问题描述】：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pew Pew</title>
  </head>
  <body>
        <canvas id="gameCanvas" height="800px" width="1000px"></canvas>
        <div class="button-div">
        <button id="atkUp" onclick="player.attackSpeedUp()">1 Atk Speed - 1c</button>
        <button id="dmgUp" onclick="player.damageUp()">1 Damage - 1c</button>
        <button id="multishotUp" onClick="player.multishotUp()">1 Multi-Shot - 1c</button>
        <button id="moveSpeedUp" onClick="player.moveSpeedUp()">1 Move Speed - 1c</button>
        <button id="armorUp" onclick="player.armorUp()">1 Armor - 1c</button>
         <p>UPGRADES</p>
        </div>
  </body>
</html>

document.addEventListener("keypress", (event) =>{
    if(event.keyCode == 32){
        player.shoot();
    }
}, false);

我的问题是，当我点击任何升级按钮（.button-div 中的任何按钮）时，当我按下空格键时，它会激活（“点击”）我按下的最后一个按钮并且不会触发我的事件监听器.有没有办法以编程方式取消最近按钮的焦点和/或阻止按钮抢走我的空格键输入。

【问题讨论】：

防止默认。

标签： javascript html input event-listener

【解决方案1】：

试试这个，问题是当你点击一个按钮时，你会关注这个按钮，而空格键会触发你关注的按钮的技巧。我添加了一些代码来移除焦点，当你按下空格键时模糊所有按钮：

    function deselectAllUpgradeButtons() {
        for (const element of document.querySelector('.button-div').children) {
            element.blur();
        }
    }

    document.addEventListener(
        'keypress',
        (event) => {
            if (event.keyCode == 32) {
                deselectAllUpgradeButtons();
                player.shoot();
            }
        },
        false
    );

【讨论】：

【解决方案2】：

试试这个：

    document.body.onkeyup = function(event){
    event.preventDefault()
    if(event.keyCode === 32){
        player.shoot();
    }
  };

【讨论】：