javascript 输入按键触发链接
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6947295/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enter key triggering link
提问by NinaNa
I have a JQuery scroller on a page where each item is a div with an id. each div has a link to the next div in the scroller (all on the same page)
我在页面上有一个 JQuery 滚动条,其中每个项目都是一个带有 id 的 div。每个 div 都有一个指向滚动条中下一个 div 的链接(都在同一页面上)
$('a.panel').click(function () {
};
I have a click event to all links with the 'panel' class where I check which links was clicked and then do some ajax processing accordingly:
我对“面板”类的所有链接都有一个单击事件,我在其中检查单击了哪些链接,然后相应地进行一些 ajax 处理:
if($(this).attr('href')=="#item2")
{
//do some processsing
}
and once the processing is done I use the scrollTo JQuery method to scroll to the next div
处理完成后,我使用 scrollTo JQuery 方法滚动到下一个 div
I need to have it that the user can press the enter key instead of clicking on the link. Now the problem is: a. I have several links on the same page that all need to have this behaviour. b. I need to differentiate which link triggered the click event and do some server-side processing.
我需要让用户可以按回车键而不是点击链接。现在的问题是: a.我在同一页面上有几个链接都需要具有这种行为。湾 我需要区分哪个链接触发了点击事件并做一些服务器端处理。
Is this possible at all?
这可能吗?
I appreciate the quick and helpful responses!!Thanks a million for the help!
我感谢快速而有用的回复!感谢一百万的帮助!
回答by Brandon Hill
Focus + enter willtrigger the click event, but only if the anchor has an href
attribute (at least in some browsers, like latest Firefox). Works:
Focus + enter将触发点击事件,但前提是锚点具有href
属性(至少在某些浏览器中,例如最新的 Firefox)。作品:
$('<a />').attr('href', '#anythingWillDo').on('click', function () {
alert('Has href so can be triggered via keyboard.');
// suppress hash update if desired
return false;
}).text('Works').appendTo('body');
Doesn't work (browser probably thinks there's no action to take):
不起作用(浏览器可能认为没有采取措施):
$('<a />').on('click', function () {
alert('No href so can\'t be triggered via keyboard.');
}).text('Doesn\'t work').appendTo('body');
回答by Wesley Murch
You can trigger()
the click event of whichever element you want when the enter key is pressed. Example:
trigger()
当按下回车键时,您可以触发任何您想要的元素的点击事件。例子:
$(document).keypress(function(e) {
if ((e.keyCode || e.which) == 13) {
// Enter key pressed
$('a').trigger('click');
}
});
$('a').click(function(e) {
e.preventDefault();
// Link clicked
});
Demo: http://jsfiddle.net/eHXwz/1/
演示:http: //jsfiddle.net/eHXwz/1/
You'll just have to figure out which specific element to trigger the click on, but that depends on how/what you are doing. I will say that I don't really recommend this, but I will give you the benefit of the doubt.
您只需要弄清楚触发点击的特定元素,但这取决于您正在做什么/做什么。我会说我真的不推荐这个,但我会给你带来怀疑的好处。
A better option, in my opinion, would be to focus()
the link that should be clicked instead, and let the user optionally press enter, which will fire the click event anyways.
在我看来,更好的选择focus()
是指向应该点击的链接,并让用户选择按 Enter,这将触发点击事件。
I would like to focus on the link, but am unfamiliar exactly how to do this, can you explain?
我想专注于链接,但我不熟悉具体如何做到这一点,您能解释一下吗?
Just use $(element).focus()
. But once again, you'll have to be more specific, and have a way to determine which element should receive focus, and when. Of course the user, may take an action that will cause the link to lose focus, like clicking somewhere else. I have no idea what your app does or acts like though, so just do what you think is best, but remember that users already expect a certain kind of behavior from their browsers and will likely not realize they need to press "enter" unless you tell them to.
只需使用$(element).focus()
. 但同样,您必须更加具体,并有办法确定哪个元素应该获得焦点以及何时获得焦点。当然,用户可能会采取导致链接失去焦点的操作,例如单击其他位置。我不知道您的应用程序的功能或行为,所以只做您认为最好的事情,但请记住,用户已经期望他们的浏览器具有某种行为,并且可能不会意识到他们需要按“输入”,除非您告诉他们。
If you do choose to use the "press enter" method instead of focusing the link, you'll likely want to bind()
and unbind()
the keypress function too, so it doesn't get called when you don't need it.
如果你选择使用“按回车键”的方法,而不是聚焦的链接,你可能会想bind()
和unbind()
该按键的功能也一样,所以当你不需要它,它不会被调用。
Related:
有关的:
回答by Alexander Kahoun
$('a.panel').live('keyup', function (evt) {
var e = evt || event;
var code = e.keyCode || e.which;
if (code === 13) { // 13 is the js key code for Enter
$(e.target).trigger('click');
}
});
This will detect a key up event on any a.panel and if it was the enter key will then trigger the click event for the panel element that was focused.
这将检测任何 a.panel 上的 key up 事件,如果它是 enter 键,则将触发获得焦点的面板元素的 click 事件。
回答by ShankarSangoli
Use e.target
or this
keyword to determine which link triggered the event.
使用e.target
或this
关键字来确定哪个链接触发了事件。
$('a.panel').click(function (e) {
//e.target or this will give you the element which triggered this event.
};