我的网页有一个HTML按钮，它可以触发一些javascript，用户可以使用键盘进行交互。该按钮在第一次单击后被隐藏并禁用。问题是，在我禁用此按钮后，键盘事件侦听器不再注册按键。单击网页上的任何位置后，键盘事件将重新开始工作。这个问题出现在Firefox 89.0.2上，但Chrome 91.0.4472.124和Microsoft Edge 91.0.864.67上都没有。
代码设置如下：
<html>
<head></head>
<body>
<input type="button" id="startButton" value="Click to do stuff" onclick="stuff()">
</body>
</html>
function stuff(){
document.getElementById("startButton").style.visibility = "hidden"; //hide button
document.getElementById("startButton").disabled = true; //firefox users have to click again after this
//do stuff
}
document.addEventListener("keydown", function(event){
//do more stuff with keyboard inputs
});
我尝试过在不禁用按钮的情况下运行网页，但这会导致其他一些仅限firefox的错误(例如空格键按下莫名其妙地触发按钮，从而再次触发stuff()功能(。请分享为什么禁用此按钮会阻止检测到键盘事件(仅在firefox上(，以及如何在不要求用户再次单击屏幕的情况下保持eventListener活动。
这是一个有趣的发现，我称之为Firefox方面的bug。这是disabled状态造成的。理论上，它仍然应该像在Chrome中一样，继续冒泡keydown事件。
要解决这个问题，只需在按钮上调用.blur()，以确保它会泄露焦点：
function stuff(){
const button = document.getElementById("startButton");
button.style.visibility = "hidden"; //hide button
button.disabled = true; //firefox users have to click again after this
button.blur();
//do stuff
}
奖金提示
与其显式设置可见性，不如设置这个CSS规则？
#startButton:disabled {
visibility: hidden;
}