当我按下Enter键时,为什么在我的<button>上触发了`click`事件？

Question

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

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规范中:

HTML中的某些元素具有激活行为,这意味着用户可以激活它们.这触发了一系列依赖于激活机制的事件,并且通常在点击事件中达到顶点,如下所述.

...

对于辅助功能,键盘的Enter键和空格键通常用于触发元素的激活行为.

然后它继续详细解释步骤.