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

  • A+

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


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


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

(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?


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.


:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: