输入按键触发链接

Question

我在页面上有一个 JQuery 滚动条，其中每个项目都是一个带有 id 的 div。每个 div 都有一个指向滚动条中下一个 div 的链接（都在同一页面上）

$('a.panel').click(function () {
};

我对所有带有“面板”类的链接都有一个点击事件，我在其中检查哪些链接被点击，然后相应地进行一些 ajax 处理：

 if($(this).attr('href')=="#item2")
{
//do some processsing 
}

处理完成后，我使用 scrollTo JQuery 方法滚动到下一个 div

我需要让用户按下回车键而不是点击链接。 现在的问题是： 一种。我在同一页面上有几个链接都需要有这种行为。 湾。我需要区分哪个链接触发了点击事件并做一些服务器端处理。

这可能吗？

感谢您快速而有帮助的回复！感谢一百万的帮助！

Answer 1

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');

不起作用（浏览器可能认为无需采取任何措施）：

$('<a />').on('click', function () {
    alert('No href so can\'t be triggered via keyboard.');
}).text('Doesn\'t work').appendTo('body');

Answer 2

当按下回车键时，您可以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
});

演示：http://jsfiddle.net/eHXwz/1/

您只需要确定触发点击的特定元素，但这取决于您的操作方式/内容。我会说我并不真正推荐这个，但我会给你怀疑的好处。

在我看来，一个更好的选择是 focus() 应该被点击的链接，并让用户有选择地按下回车键，这无论如何都会触发点击事件。

我想专注于链接，但不熟悉具体如何执行此操作，您能解释一下吗？

只需使用$(element).focus()。但是再一次，您必须更加具体，并且有办法确定哪个元素应该获得焦点，以及何时获得焦点。当然，用户可能会采取会导致链接失去焦点的操作，例如单击其他位置。我不知道您的应用程序的作用或行为方式，所以只做您认为最好的事情，但请记住，用户已经期望他们的浏览器有某种行为，并且可能不会意识到他们需要按“回车”，除非您告诉他们。

如果您确实选择使用“按回车”方法而不是关注链接，您可能还需要 bind() 和 unbind() 按键功能，所以当您不使用时它不会被调用不需要。

• http://api.jquery.com/focus/
• http://api.jquery.com/bind/
• http://api.jquery.com/unbind/

相关：

• Submitting a form on 'Enter' with jQuery?
• jQuery Event Keypress: Which key was pressed?

Answer 3

$('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');
    }
});

这将检测到任何 a.panel 上的按键事件，如果是 enter 键，则会触发获得焦点的面板元素的点击事件。

Answer 4

使用e.target 或this 关键字来确定哪个链接触发了事件。

$('a.panel').click(function (e) {
  //e.target or this will give you the element which triggered this event.
};