哪个事件应该用于按钮？

Question

我有一个按钮，我想在用户按下该按钮时执行一个操作。

我记得有人告诉我 click 事件不应该用于此目的，因为它只在用户单击按钮而不是在使用键盘时触发；但是，实际上情况似乎并非如此：

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

<button id="asdf">Press me</button>
<pre id="log"></pre>

似乎空格键触发点击事件就好了！

这似乎与 MDN docs about click 相反，后者说：

An element receives a click event when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.

因此，可以使用 click 吗？

如果不是，我应该使用哪个事件？

应该是submit？

如果是这样，submit 不只与 <form> 标签相关，而不是 <button> 标签吗 as stated per the MDN？

Answer 1

实际点击、按下回车键（当按钮有焦点时）和按下 space 栏（当按钮有焦点时）将触发按钮上的点击事件。

添加 ARIA 角色 "button" 可以明确这是一个按钮控件，而不是 link。因为我们使用的是锚元素，所以控件是可聚焦的，浏览器将自动为 Enter 击键调用 onclick 处理程序。由于用户希望能够使用 Enter 或 Space 激活按钮，因此键盘处理程序支持通过 Space 字符激活按钮。

来源：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 在 HTML 元素上按下鼠标时会触发 onClick 事件处理程序。 onClick 旨在成为鼠标相关的事件处理程序。但是，如果 onClick 事件处理程序与可键盘导航的 link 或表单控件一起使用，那么如果在 link 或控件具有焦点时按下 Enter 键，大多数主要浏览器和辅助技术都会触发 onClick。在这些情况下，onClick 是一个独立于设备的事件处理程序。

来源：https://webaim.org/techniques/javascript/eventhandlers

Answer 2

您可以在确定按钮是否被单击时使用 click 事件。当按钮具有焦点（即用户按 tab 键以将焦点放在按钮上）并且用户按 enter 或空格键时，它也会触发。这两个操作都会触发 click 事件。

只有2次点击事件不会被触发。一种是当用户单击按钮并按住单击按钮时，然后将光标移出按钮并在按钮外释放鼠标单击。另一种情况是当用户使用 tab 键将焦点放在按钮上时，按住空格键然后再次按下 tab 键以失去对按钮的焦点。这可以防止按钮被完全点击。

但是，按住并按下回车按钮（当按钮获得焦点时）会触发多次点击事件。

长话短说，是的，使用 click 事件完全 OK。

哪个事件应该用于按钮？

Which event should be used for buttons?

html

javascript

onclick

button

buttonclick