Какое событие следует использовать для кнопок?

Question

У меня есть кнопка, и я хочу выполнить действие, если пользователь нажимает эту кнопку.

Я помню, что мне говорили, что событие click не следует использовать для этой цели, поскольку оно срабатывает только в том случае, еслипользователь, ну, нажимает кнопку, а не, если клавиатура используется;НО, на практике это не так:

document.getElementById('asdf').onclick = () => {
  document.getElementById('log').appendChild(
    document.createTextNode('click\n')
  )
}

Press me

Казалось бы, пробел запускает событие щелчка очень хорошо!

Это, кажется, противоречит MDN описывает около click, в котором говорится:

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

Можно ли использовать click?

Если это не так, какое событие следует использовать?

Должно ли это быть submit?

Если да, то submit не относится только к тегу <form>, а не к тегу <button> , как указано в MDN ?

Answer 1

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

Добавление «кнопки» роли ARIA проясняет, что это кнопка, а не ссылка.Поскольку мы используем элемент привязки, элемент управления является фокусируемым, и браузер автоматически вызывает обработчик onclick для нажатия клавиши Enter.Поскольку пользователи ожидают, что смогут активировать кнопки с помощью клавиши «Ввод» или «Пробел», обработчик клавиатуры обеспечивает поддержку активации кнопки с помощью символа пробела.

source: https://www.w3.org/WAI/GL/wiki/Making_actions_keyboard_accessible_by_using_keyboard_event_handlers_with_WAI-ARIA_controls#Example_1:_Using_Space_to_activate_a_button

onClick и onDblClickОбработчик события onClick срабатывает при нажатии мыши над элементом HTML.onClick предназначен для зависимого от мыши обработчика событий.Однако, если обработчик события onClick используется с навигационными ссылками или элементами управления формы с помощью клавиатуры, то большинство основных браузеров и вспомогательных технологий запускают onClick, если нажата клавиша Enter, когда ссылка или элемент управления находится в фокусе.В этих случаях onClick является независимым от устройства обработчиком событий.

source: https://webaim.org/techniques/javascript/eventhandlers

Answer 2

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

Событие щелчка НЕ ​​будет активировано только 2 раза.Один из них - когда пользователь нажимает кнопку и удерживает ее нажатой, затем перемещает курсор за пределы кнопки и отпускает щелчок мыши за пределами кнопки.В другой раз пользователь фокусируется на кнопке с помощью клавиши табуляции, удерживает клавишу пробела и затем снова нажимает клавишу табуляции, чтобы потерять фокус на кнопке.Это предотвратит полное нажатие кнопки.

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

Короче говоря, да, использование OK в полном объеме *click событие.