Question

我有一个按钮，如果用户触发该按钮，我想执行一个操作。

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

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

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

似乎空格键会触发click事件！

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

当指针位于元素内部时，同时按下并释放定位设备按钮（例如鼠标的主鼠标按钮）时，元素将收到click事件。

因此可以使用click吗？

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

应该是submit吗？

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

Answer 1

实际单击，按Enter（当按钮具有焦点时）和按空格键（当按钮具有焦点时）将触发按钮的点击事件。

添加ARIA角色“按钮”可以清楚地表明这是按钮控件，而不是链接。因为我们使用的是定位元素，所以控件是可聚焦的，浏览器将自动为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事件处理程序与可通过键盘导航的链接或表单控件一起使用，则当链接或控件具有焦点时，如果按Enter键，则大多数主流浏览器和辅助技术都会触发onClick。在这种情况下，onClick是与设备无关的事件处理程序。

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

Answer 2

在确定是否单击按钮时可以使用click事件。当按钮具有焦点时（即用户按下Tab键将焦点对准按钮），并且用户按下Enter键或空格键，也会触发该事件。这两个动作都会触发click事件。

只有2次不会触发click事件。一种是当用户单击按钮并按住click按钮，然后将光标移出按钮并在按钮外部释放鼠标单击。另一个时间是用户使用Tab键将注意力集中在按钮上，按住空格键，然后再次按下Tab键以失去对按钮的关注。这样可以防止完全单击按钮。

但是，按住并按下Enter键（按钮处于焦点时）会触发多次点击事件。

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

哪个事件应用于按钮？

2 个答案: