为什么在按键事件中记录了一个太空栏会导致一些例外
我的代码中有一个问题，它是：
<!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>
上面的简单代码是打字机Web游戏，每400ms每400ms随机生成一个字母，如果用户正确键入，则删除最后一个字符。但是，问题在于，当用户键入太空栏时，间隔倒计时重新启动并一次生成越来越多的字母。我试图检查用户是否键入空格栏并插入警报功能，它可以防止发生异常，但是以某种方式成为暂停按钮。谁能向我解释这种例外是如何以及为什么发生的？太感谢了！
I had an issue inside my code, there it is:
<!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>
The simple code above is a typewriter web game, it generates an alphabet randomly every 400ms, and removes the last character if a user types correctly. However, the issue is, that when the user types the space bar, the countdown of the interval restart and generate more and more alphabet at one time. I tried to check if the user types the space bar and inserts the alert function, it can prevent the exception occur, but somehow it became a pause button. Can anyone explain to me how and why this exception happens? Thank you so much!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
按下按钮后，您的单击按钮将重点放置，因此SpaceBar将采取行动以再次单击按钮。
警报导致焦点远离按钮，这就是为什么空格键不再发射事件的原因。
如果要删除焦点，则可以添加
Blur事件（在按钮上）以删除焦点，以使Spacebar无法运行以单击“事件”侦听器中的按钮，e.target是按钮被点击了
Your click to start button has focus after it is pressed, so spacebar will act to click the button again.
The alert caused focus to move away from the button, which is why spacebar no longer fired the event.
If you want to remove focus, you can add a
blurevent (on the button) to remove focus so spacebar won't function to click the buttonIn the event listener, e.target is the button that was clicked, so we can programmatically fire the blur event