为什么在按键事件中记录一个 space bar 会导致一些异常

Question

我的代码中有一个问题，它是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function typeWriter() {

            function genOutput() {

                function genText() {
                    //generate random alphabet via ASCII char code
                    return String.fromCharCode(0|Math.random()*26+97);
                }

                const text = document.getElementById("genText");
                text.textContent = genText() + text.textContent;
            }

            const text = document.getElementById("genText");
            const score = document.getElementById("scoreBoard");

            text.textContent = "";
            window.setInterval(genOutput, 400);  //automatically generate one charracter per 0.4 sec
            document.addEventListener('keypress', (e) => {
                const input = String.fromCharCode(e.charCode);
                const lastCharacter = text.textContent.charAt(text.textContent.length-1);
                if (input == lastCharacter) {
                    const newText = text.textContent.slice(0, -1);
                    text.textContent = newText;
                    score.innerText = "" + (parseInt(score.innerText)+3);
                    
                }
                else if (input == " ") {
                    //check if user type space bar
                    alert("Click to continue");   //if remove this alert will occur exception
                }
                else {
                    score.innerText = "" + (parseInt(score.innerText)-1);
                }
            })
        }
    </script>
    <div class="container">
        <p id="title">Typewriter 2.0</p>
    </div>
    <div class="container">
        <h1 id="genText">Typed correct +3 pt, incorrect -1 pt</h1><br>
        <button id="startBtn" onclick="typeWriter()">Click to Start</button>
        <span>Score: </span><span id="scoreBoard">10</span>
    </div>
</body>
</html>

上面的简单代码是一个打字机网页游戏，它每400毫秒随机生成一个字母表，如果用户输入正确，则删除最后一个字符。但是，问题是，当用户键入 space 栏时，间隔重新开始倒计时并一次生成越来越多的字母表。我试图检查用户是否键入 space 栏并插入警报功能，它可以防止异常发生，但不知何故它变成了一个暂停按钮。任何人都可以向我解释这个异常是如何以及为什么发生的吗？非常感谢！

Answer 1

你的点击开始按钮在按下后有焦点，所以空格键会再次点击按钮。

警报导致焦点从按钮上移开，这就是空格键不再触发事件的原因。

如果你想移除焦点，你可以添加一个 blur 事件（在按钮上）来移除焦点，这样空格键就不能点击按钮了

e.target.blur();

在事件侦听器中，e.target 是被单击的按钮，因此我们可以通过编程方式触发模糊事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function typeWriter() {

            function genOutput() {

                function genText() {
                    //generate random alphabet via ASCII char code
                    return String.fromCharCode(0|Math.random()*26+97);
                }

                const text = document.getElementById("genText");
                text.textContent = genText() + text.textContent;
            }

            const text = document.getElementById("genText");
            const score = document.getElementById("scoreBoard");

            text.textContent = "";
            window.setInterval(genOutput, 400);  //automatically generate one charracter per 0.4 sec
            document.addEventListener('keypress', (e) => {
            e.target.blur(); // remove focus from the button so spacebar won't continue game
                const input = String.fromCharCode(e.charCode);
                const lastCharacter = text.textContent.charAt(text.textContent.length-1);
                if (input == lastCharacter) {
                    const newText = text.textContent.slice(0, -1);
                    text.textContent = newText;
                    score.innerText = "" + (parseInt(score.innerText)+3);
                    
                }
                else if (input == " ") {
                    //check if user type space bar
                 //   alert("Click to continue");   //if remove this alert will occur exception
                }
                else {
                    score.innerText = "" + (parseInt(score.innerText)-1);
                }
            })
        }
    </script>
    <div class="container">
        <p id="title">Typewriter 2.0</p>
    </div>
    <div class="container">
        <h1 id="genText">Typed correct +3 pt, incorrect -1 pt</h1><br>
        <button id="startBtn" onclick="typeWriter()">Click to Start</button>
        <span>Score: </span><span id="scoreBoard">10</span>
    </div>
</body>
</html>

为什么在按键事件中记录一个 space bar 会导致一些异常

Why recorded a space bar in keypress event will cause some exception

javascript

keyboard-events