jquery 对任何焦点元素的按键触发点击事件

uyhoqukh 于 2023-10-17 发布在 jQuery

关注(0)|答案(4)|浏览(109)

有没有一种默认的方式来触发一个点击事件，只要在一个焦点元素上按下回车键？
我所指的是在关注<button>时按enter与在关注<button>时按enter的区别。在聚焦于<div> <li> <span>时按回车键，等等。<button>按键enter按预期触发。但是，<div>按键enter什么也不做。我相信你必须专门写的事件，为该按键。

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

$("li").keydown(function(e){
    if(e.which === 13){
        $(this).click();
    }
});

jquery

来源：https://stackoverflow.com/questions/42034359/trigger-click-event-on-keypress-for-any-focused-element

4条答案

按热度按时间

0mkxixxg1#

有没有一种默认的方式来触发一个点击事件，只要在一个焦点元素上按下回车键？

没有JavaScript就没有解决方案

尽管onclick具有与the W3C mentions相同的特殊行为，
虽然“onclick”听起来像是和鼠标绑定在一起，但onclick事件实际上Map到链接或按钮的默认操作。
除了链接和按钮之外，这对其他元素不起作用。
您可能会尝试将role="button"添加到带有tabindex="0"的div。这不起作用
Mozilla documentation明确指出，即使使用button角色，也必须定义处理程序。
这很容易理解，因为这是一个浏览器功能。当你在一个元素上定义role=link时，你不能右击它，希望它会打开你的浏览器上下文菜单。出于同样的原因，定义role=button属性不会影响默认行为。From this discussion:
ARIA只是传达作者意图传达给辅助技术的可访问性语义。
也不要忘记处理空格键。Read Karl Groves article and example about the subject.

赞(0）回复(0）举报 2023-10-17

blpfk2vs2#

如果页面上的元素已经具有单击事件，并且处于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制作的横幅广告中访问其他基于图像的控件特别有用。

赞(0）回复(0）举报 2023-10-17

dwbf0jvd3#

某些HTML元素，如span, li, div，没有真正的焦点状态，因此焦点不会触发。为了给予元素一个可能的焦点状态，可以做的是添加一个tabindex，它会工作，例如：