为什么当我按Enter时,在我的<button>上触发了一次click事件?

时间:2019-01-07 11:03:53

标签: javascript html dom accessibility dom-events

我只在click上添加了一个<button>事件处理程序。

document.getElementsByTagName("button")[0].addEventListener("click", event => {
  event.preventDefault();

  console.log("Click:", event);
});
<button>Press <kbd>Enter</kbd> on me</button>

Demo link

尽管如此,当我在Firefox中切换至该按钮时,然后按 Enter ,我看到click事件被触发。但是,我看不到任何地方记录此行为。这是标准行为,我可以指望它在所有浏览器中都能正常工作吗?

4 个答案:

答案 0 :(得分:17)

这在很大程度上是因为许多作者在历史上曾经使用单击事件来编写代码,而忘记考虑未单击的用户(无论是因为他们更喜欢使用键盘进行导航,还是有残障,这使得使用它很难指针设备或其他任何原因。

行为是documented in the HTML specification

  

HTML中的某些元素具有激活行为,这意味着用户可以激活它们。这会触发一系列取决于激活机制的事件,通常会在点击事件中达到高潮,如下所述。

     

...

     

为实现可访问性,通常使用键盘的Enter和Space键来触发元素的激活行为。

然后继续详细解释这些步骤。

答案 1 :(得分:3)

因为对于键盘用户(鼠标不可用),当按钮处于焦点位置并且您按下 Enter (也可能是 Space )时,它会模拟一次点击事件。

这是大多数(如果不是全部)浏览器提供的浏览器可访问性支持。

答案 2 :(得分:3)

这在WCAG中记录: SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons

  

虽然onclick听起来像是与鼠标绑在一起的,但onclick事件实际上是映射到链接或按钮的默认操作的。当用户用鼠标单击元素时会发生默认操作,但是当用户将元素聚焦并点击 enter space 以及触发元素时也会发生默认操作通过辅助功能API。

这在UIEVents /click section中也有说明:

  

除了与指针设备相关联之外,还必须将click event类型必须作为元素激活的一部分进行分派,如§3.5激活触发器和行为中所述。

The Activation trigggers paragraph指出:

  

用户启动的激活触发器包括单击可激活元素上的鼠标按钮,在可激活元素具有焦点时按 Enter键或按某种方式链接到可激活元素的键(热键或访问键),即使该元素没有焦点。

这意味着这些触发器中的任何一个都将调度click事件。

答案 3 :(得分:0)

我已经通过将div元素与onClick侦听器结合使用来解决了该问题。似乎button元素是出于可访问性目的而输入enter press的,就像上面的家伙所写的那样。

相关问题