<button>当我按下 Enter 时，</button>为什么会触发“click”事件<button>？</button>

Question

我只是在我的<button>上添加了一个click事件处理程序。

 document.getElementsByTagName("button")[0].addEventListener("click", event => { event.preventDefault(); console.log("Click:", event); });

 <button>Press <kbd>Enter</kbd> on me</button>

然而，当我在 Firefox 中点击按钮，然后按Enter 时，我看到click事件被触发。 但是，我无法在任何地方看到这种行为的记录。 这是标准行为吗，我可以指望它在所有浏览器中都能正常工作吗？

Answer 1

这主要是因为历史上许多作者都使用点击事件编写代码，而忘记考虑不点击的用户（无论是因为他们更喜欢使用键盘进行导航，还是因为残疾导致难以使用指点设备，或其他任何原因）。

HTML 中的某些元素具有激活行为，这意味着用户可以激活它们。 这会触发一系列取决于激活机制的事件，通常以点击事件结束，如下所述。

…

对于可访问性，键盘的 Enter 和 Space 键通常用于触发元素的激活行为。

然后继续详细解释这些步骤。

Answer 2

因为对于键盘用户（鼠标不可用），当一个按钮处于焦点状态并且您按下Enter （也可能是Space ）时，它会模拟单击事件。

这是大多数（如果不是全部）浏览器提供的浏览器可访问性支持。

Answer 3

这在 WCAG 中有记录： SCR35：通过使用锚点和按钮的 onclick 事件使操作键盘可访问：

虽然onclick听起来像是绑定到鼠标，但 onclick 事件实际上映射到链接或按钮的默认操作。 默认操作发生在用户用鼠标单击元素时，但也会在用户聚焦元素并点击enter或space以及通过辅助功能 API 触发元素时发生。

除了与指针设备相关联之外， click event类型必须作为元素激活的一部分进行调度，如 §3.5 激活触发器和行为中所述。

用户启动的激活触发器包括在可激活元素上单击鼠标按钮，在可激活元素具有焦点时按下Enter 键，或按下以某种方式链接到可激活元素的键（热键或访问键），即使该元素没有没有重点。

这意味着这些触发器中的任何一个都将调度click事件。

Answer 4

我已经通过使用带有 onClick 侦听器的div元素解决了这个问题。 似乎button元素为了可访问性目的而捕获按下button ，就像上面写的那样。