为什么禁用 HTML 按钮会阻碍键盘 eventListener（仅限 Firefox）？

Question

我的网页有一个 HTML 按钮，可以触发一些 javascript 用户使用键盘与之交互。第一次单击后，该按钮将被隐藏和禁用。问题是在我禁用此按钮后，键盘 eventListener 不再注册按键。单击网页上的任意位置后，键盘事件将再次开始工作。此问题出现在 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 活动。

Answer 1

这是一个有趣的发现，我将其称为 Firefox 方面的错误。这是 disabled 状态造成的。理论上，它应该仍然继续冒泡 keydown 事件，就像在 Chrome.

中一样

要解决此问题，只需在您的按钮上调用 .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;
}

为什么禁用 HTML 按钮会阻碍键盘 eventListener（仅限 Firefox）？

Why does disabling an HTML button obstruct keyboard eventListener (Firefox only)?

html

javascript

button

keydown

addeventlistener