为什么禁用 HTML 按钮会阻碍键盘事件监听器（仅限 Firefox）？答案

【问题标题】：Why does disabling an HTML button obstruct keyboard eventListener (Firefox only)?为什么禁用 HTML 按钮会阻碍键盘事件监听器（仅限 Firefox）？
【发布时间】：2021-09-23 00:00:53
【问题描述】：

我的网页有一个 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 处于活动状态。

【问题讨论】：

可能与焦点有关。

标签： javascript html button addeventlistener keydown

【解决方案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;
}

【讨论】：

“理论上，它应该仍然像在 Chrome 中一样继续冒泡 keydown 事件”不，阻止 keydown 事件听起来是正确的行为。错误是它们应该自动模糊输入，因为禁用的输入不应该是可聚焦的。然而，按键被阻止的事实是一个好兆头。
@Kaiido 请记住，这个错误比“保持焦点”更严重。奇怪的是，它实际上忽略了禁用按钮的按键。如果您阻止按钮被禁用，它会正常工作，即使焦点在按钮上。
不，一点也不奇怪，禁用的元素不应该接收任何输入。
他们是否也应该防止关键事件冒泡？那是我不确定的地方
是的，只有 ShadowDOM 能够更改事件的目标，他们将这个事件静音是一种预期/比冒泡更糟糕。