为任何聚焦的元素触发按键点击事件
[英]Trigger click event on keypress for any focused element
问题描述
Is there a default way to trigger a click event anytime enter is pressed on a focused element?
是否有一种默认方式可以在任何时候在焦点元素上按下 enter 时触发点击事件？
What I am referencing is the differences from pressing enter while focused on a <button> vs. pressing enter while focused on a <div> <li> <span> , etc. The <button> keypress enter triggers as expected.我所指的是在专注于<button>按 Enter 与专注于<div> <li> <span>按 Enter 的区别，等等。 <button>按键enter按预期触发。 However, <div> keypress enter does nothing.但是， <div>按键enter什么都不做。 I believe you have to specifically write the event in for that keypress.我相信您必须专门为该按键编写事件。
$('li').click(function() {
//toggles something
});
$("li").keydown(function(e){
if(e.which === 13){
$(this).click();
}
});
4 个解决方案
解决方案1
9 已采纳 2017-02-04 17:32:31
Is there a default way to trigger a click event anytime enter is pressed on a focused element?
There's no solution without javascript.没有javascript就没有解决方案。
Although the onclick has a special behavior as the W3C mentions尽管onclick具有W3C 提到的特殊行为
While "onclick" sounds like it is tied to the mouse, the onclick event is actually mapped to the default action of a link or button .
this does not work with other elements than links and buttons.这不适用于链接和按钮以外的其他元素。
You could be tempted to add role="button" to a div with a tabindex="0" .您可能会想将role="button"添加到带有tabindex="0"的div 。 This does not work.这不起作用。
The Mozilla documentation explicitely says that you have to define handler, even with the button role. Mozilla 文档明确指出您必须定义处理程序，即使是button角色。
This is easily understandable as this is a browser feature.这很容易理解，因为这是浏览器功能。 When you define role=link on an element, you can't right click on it, hoping that it will open your browser context menu.当你在一个元素上定义role=link时，你不能右键单击它，希望它会打开你的浏览器上下文菜单。 For the same reason, defining the role=button attribute won't affect the default behavior.出于同样的原因，定义role=button属性不会影响默认行为。 From this discussion: 从这个讨论：
ARIA simply conveys the accessibility semantics intended by the author that are conveyed to an assistive technology.
Also do not forget to handle the space key.也不要忘记处理空格键。 Read Karl Groves article and example about the subject. 阅读 Karl Groves 文章和有关该主题的示例。
解决方案2
5 2020-06-01 22:46:54
If the elements on your page already have click events, and are in the tab order, and you just want to make the enter key trigger a click on whichever element has focus for accessibility, try the following:如果页面上的元素已经有点击事件，并且在 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)">
This is especially useful for adding play/pause and making other image based controls accessible in banner ads made with Google Web Designer.这对于添加播放/暂停以及在使用 Google Web Designer 制作的横幅广告中访问其他基于图像的控件特别有用。
解决方案3
1 2017-02-03 23:08:30
Certain HTML Elements such as span, li, div doesn't not have really have a focused state hence the focus won't trigger.某些 HTML 元素，例如span, li, div并没有真正具有聚焦状态，因此不会触发焦点。 What can be done in order to give the element a possible focus state is to add a tabindex and it will work, eg:为了给元素一个可能的焦点状态可以做的是添加一个 tabindex 并且它会起作用，例如：
<div tabindex="0"></div>
解决方案4
0 2017-02-04 02:44:18
When I listen for keyboard events on a list, I put the handler on the <ul> instead of the <li> and it works great.当我在列表上监听键盘事件时，我将处理程序放在<ul>而不是<li> ，效果很好。 It might work on the <li> as well but your example above sounds like it doesn't.它也可能适用于<li> ，但你上面的例子听起来好像没有。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.