Why does a `click` event get triggered on my <button> when I press Enter on it?

user_859631 0
Viewed 4198

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>

(Demo link)

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?

accessibility dom-events dom html javascript
4 Answers

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).

The behaviour is documented in the HTML specification:

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.

…

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.

Dorward_190680

Because for keyboard users (where a mouse is not available), when a button is in focus and you press Enter (possibly Space as well) it simulates a click event.

This is the browser's accessibility support which most, if not all, browsers provide.

user_43774300

This is documented in WCAG: SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons:

While onclick sounds like it is tied to the mouse, the onclick event is actually mapped to the default action of a link or button. The default action occurs when the user clicks the element with a mouse, but it also occurs when the user focuses the element and hits enter or space, and when the element is triggered via the accessibility API.

This is also stated in UIEVents /click section:

In addition to being associated with pointer devices, the click event type MUST be dispatched as part of an element activation, as described in §3.5 Activation triggers and behavior.

The Activation trigggers paragraph states that:

User-initiated activation triggers include clicking a mouse button on an activatable element, pressing the Enter key when an activatable element has focus, or pressing a key that is somehow linked to an activatable element (a hotkey or access key) even when that element does not have focus.

Which means that any of those triggers will dispatch the click event.

user_45401410

I've solved it by using div element with onClick listener instead. It seems that button element captures enter press for the accessibility purposes, like the guys above wrote.

user_110285070
Related