Question

是否有一种默认方式可以在聚焦元素上按下输入时触发点击事件？

我所引用的是在关注notifications.php时与按Enter键与在关注function auto_load(){ $.ajax({ type: 'POST', url: 'notifications.php', success: function(data){ $('#notification').html(data); } }); } auto_load(); //Call auto_load() function when DOM is ready. //Refresh auto_load() function after 30 seconds. setInterval(auto_load,30000);时按Enter键的差异等。<button>按键<div> <li> <span>按预期触发。但是，<button>按键enter不执行任何操作。我相信你必须专门为该按键编写事件。

<div>

Answer 1

是否有一种默认方式可以在聚焦元素上按下输入时触发点击事件？

没有javascript就没有解决方案。

虽然onclick具有the W3C mentions

的特殊行为

while＆＃34; onclick＆＃34;听起来它与鼠标相关联， onclick事件实际上映射到链接或按钮的默认操作。

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

您可能很想将role="button"添加到div tabindex="0"。 这不起作用。

Mozilla documentation明确表示你必须定义处理程序，即使是button角色。

这很容易理解，因为这是一个浏览器功能。在元素上定义role=link时，您无法右键单击它，希望它会打开您的浏览器上下文菜单。出于同样的原因，定义role=button属性不会影响默认行为。 From this discussion:

ARIA简单地传达了可访问性语义作者打算将其传达给辅助技术。

另外不要忘记处理 space 键。 Read Karl Groves article and example about the subject.

Answer 2

如果页面上的元素已经具有单击事件并且按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)">

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

Answer 3

某些HTML元素（例如span, li, div）实际上并没有真正具有聚焦状态，因此焦点不会触发。为了给元素一个可能的焦点状态，可以做的是添加一个tabindex，它将起作用，例如：

<div tabindex="0"></div>

Answer 4

当我在列表中侦听键盘事件时，我将处理程序放在<ul>而不是<li>上，并且效果很好。它也可能适用于<li>，但上面的例子听起来并非如此。

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

4 个答案: