Почему на моем <button>срабатывает событие `click`, когда я нажимаю Enter?

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 и пробел на клавиатуре часто используются для запуска поведения активации элемента.

Далее подробно объясняются шаги.

Answer 2

Это задокументировано в WCAG: SCR35: Доступ к действиям на клавиатуре с помощью события onclick якорей и кнопок :

Хотя onclick звучит так, как будто оно связано с мышью, событие onclick фактически отображается на действие по умолчанию для ссылки или кнопки. Действие по умолчанию происходит, когда пользователь щелкает мышью по элементу, но также происходит, когда пользователь фокусирует элемент и нажимает enter или space , и когда элемент запускается через API специальных возможностей.

Это также указано в UIEVents / click section :

В дополнение к тому, что он связан с указательными устройствами, тип click event ДОЛЖЕН быть отправлен как часть активации элемента, как описано в §3.5 Триггеры активации и поведение.

В пункте «Триггеры активации» указано, что:

Инициируемые пользователем триггеры активации включают в себя нажатие кнопки мыши на активируемом элементе, нажатие клавиши Enter , когда активируемый элемент имеет фокус, или нажатие клавиши, которая каким-либо образом связана с активируемым элементом (горячая клавиша). или ключ доступа), даже если этот элемент не имеет фокуса.

Это означает, что любой из этих триггеров отправит событие click.

Answer 3

Поскольку для пользователей клавиатуры (когда мышь недоступна), когда кнопка находится в фокусе и вы нажимаете Ввод (возможно, также Пробел ), она имитирует событие щелчка.

Это поддержка специальных возможностей браузера, которую обеспечивает большинство, если не все, браузеры.