为任何聚焦的元素触发按键点击事件

Jav*_*tez 11 html javascript jquery accessibility

是否有一种默认方式可以在任何时候在焦点元素上按下 enter 时触发点击事件?

我所指的是在专注于 a 时<button>按 Enter 与在专注于 a<div> <li> <span>等时按 Enter 的区别。<button>按键enter按预期触发。但是,<div>按键enter没有任何作用。我相信您必须专门为该按键编写事件。

$('li').click(function() {  
    //toggles something 
});

$("li").keydown(function(e){
    if(e.which === 13){
        $(this).click();
    }
});
Run Code Online (Sandbox Code Playgroud)

Ada*_*dam 11

是否有一种默认方式可以在任何时候在焦点元素上按下 enter 时触发点击事件?

没有javascript就没有解决方案。

尽管W3C 提到onclick它的特殊行为

虽然 "onclick" 听起来像是绑定到鼠标,但 onclick 事件实际上映射到链接或按钮的默认操作

这不适用于链接和按钮以外的其他元素。

您可能会想添加role="button"div带有tabindex="0". 这不起作用。

Mozilla的文件明确地说,你必须定义处理程序,即使有button作用。

这很容易理解,因为这是浏览器功能。当你定义role=link一个元素时,你不能右键单击它,希望它会打开你的浏览器上下文菜单。出于同样的原因,定义role=button属性不会影响默认行为。从这个讨论:

ARIA 只是传达了作者想要传达给辅助技术的可访问性语义。

也不要忘记处理space钥匙。阅读有关该主题的 Karl Groves 文章和示例。


小智 5

如果页面上的元素已经有点击事件,并且在 Tab 键顺序中,并且您只想让 Enter 键触发点击任何具有可访问性焦点的元素,请尝试以下操作:

<head>
  <script>?
  function handleEnter(e){?
    var keycode = (e.keyCode ? e.keyCode : e.which);?
    if (keycode == '13') {?
      document.activeElement.click();?
    }?
  }?
  </script>?
</head>?
?
<body onkeypress="handleEnter(event)">
Run Code Online (Sandbox Code Playgroud)

这对于添加播放/暂停以及在使用 Google Web Designer 制作的横幅广告中访问其他基于图像的控件特别有用。