为什么我的< button>触发了`click`事件？当我按Enter键的时候？ [英] Why does a `click` event get triggered on my <button> when I press Enter on it?

问题描述

我只在我的< button> 上添加点击事件处理程序。

I'm only adding a click event handler on my <button>.

document.getElementsByTagName("button")[0].addEventListener("click", event => {
  event.preventDefault();

  console.log("Click:", event);
});

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

（演示链接）

然而，当我选择标签时Firefox中的按钮，然后按 Enter ，我看到点击事件被触发。但是，我无法在任何地方看到此行为。这是标准的行为吗？我可以依靠它在所有浏览器中工作吗？

Nevertheless, when I tab to the button in Firefox, then press Enter, I see the click event being fired. However, I cannot see this behaviour documented anywhere. Is this standard behaviour, and can I count on it working in all browsers?

推荐答案

这很大程度上是因为很多作者都有历史使用点击事件编写代码，同时忘记考虑不点击的用户（无论是因为他们喜欢使用键盘进行导航，还是因为难以使用指点设备，或者出于其他原因）。

This is largely because lots of authors have historically written code using click events while forgetting to account for users who don't click (whether because they prefer to use a keyboard to navigate, have a disability which makes it hard to use a pointing device, or whatever other reason).

行为是记录在HTML规范：

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

Certain elements in HTML have an activation behavior, which means that the user can activate them. This triggers a sequence of events dependent on the activation mechanism, and normally culminating in a click event, as described below.

...

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

For accessibility, the keyboard’s Enter and Space keys are often used to trigger an element’s activation behavior.

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

It then goes on to explain the steps in detail.

这篇关于为什么我的< button>触发了`click`事件？当我按Enter键的时候？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！