我的代碼中有一個問題，它是：
<!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 毫秒隨機生成一個字母，如果用戶輸入正確，則洗掉最后一個字符。但是，問題是，當用戶鍵入空格鍵時，間隔的倒計時重新開始，并且一次生成越來越多的字母。我試圖檢查用戶是否鍵入空格鍵并插入警報功能，它可以防止例外發生，但不知何故它變成了一個暫停按鈕。誰能向我解釋這個例外是如何以及為什么發生的？太感謝了！
uj5u.com熱心網友回復：
您的單擊開始按鈕在按下后具有焦點，因此空格鍵將再次單擊該按鈕。
警報導致焦點從按鈕上移開，這就是空格鍵不再觸發事件的原因。
如果要洗掉焦點，可以添加一個blur事件（在按鈕上）以洗掉焦點，這樣空格鍵就無法單擊按鈕
e.target.blur();
在事件監聽器中，e.target 是被點擊的按鈕，所以我們可以通過編程方式觸發 blur 事件
<!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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/455676.html
標籤：javascript 键盘事件