按下回车键触发链接

Question

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

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

我有一个针对所有带有“panel”类的链接的点击事件，在其中检查哪些链接被点击，然后根据情况进行一些ajax处理：

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

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

我需要让用户可以按“Enter”键代替点击链接。 现在的问题是： a.在同一页上有多个链接都需要这种行为。 b.需要区分哪个链接触发了点击事件并执行一些服务器端处理。

这种情况是否可能？ 非常感谢快速和有用的回复！非常感谢您的帮助！

- NinaNa

---

我非常确定焦点+回车键已经会触发click()了，你确定这不是已经按预期工作了吗？还是我错过了问题的重点？ - Wesley Murch

谢谢您的回复，我不确定您的意思是什么？我需要设置焦点吗？这个怎么工作？ - NinaNa

“我需要让用户可以按回车键而不是点击链接”，这句话的意思是什么？只有一个链接吗？如果是这样，你是在问如何检查是否按下了“回车”键？ - Wesley Murch

我希望当用户在键盘上点击“Enter”时，它能够与使用鼠标单击实际链接相同。 - NinaNa

它是一个滚动条，每个幻灯片都有自己的链接。 - NinaNa

Answer 1

使用“焦点+回车”将触发点击事件，但仅当锚点具有 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');

- Brandon Hill

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()链接应该被点击，然后让用户选择按Enter键，这将无论如何触发单击事件。

我想关注这个链接，但不知道具体怎么做，请问能解释一下吗？

只需使用$(element).focus()。但再次强调，您必须更具体，并且必须有一种方法来确定哪个元素应该接收焦点以及何时接收焦点。当然，用户可能会采取某些操作，导致链接失去焦点，比如在其他地方单击。我不知道您的应用程序的具体情况，所以请根据自己的判断做出最佳选择，但请记住，用户已经期望浏览器具有某种行为方式，并且可能不会意识到他们需要按“Enter”键，除非您告诉他们。

如果您选择使用“按Enter”方法而不是将焦点放在链接上，则可能还需要绑定（bind()）和解除绑定（unbind()）keypress函数，以便在不需要时不会调用它。

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

相关：

• 使用jQuery在“Enter”上提交表单？
• jQuery事件Keypress：按下了哪个键？

- Wesley Murch

---

我想专注于链接，但不太清楚如何做到这一点，你能解释一下吗？（这可能是一个愚蠢的问题，但我不是js专家） - NinaNa

Answer 3

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

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

- ShankarSangoli

---

我已经使用了那个，我想添加一个功能，让他们可以按下键盘上的回车键并触发链接。 - NinaNa

Answer 4

$('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 上的按键松开事件，如果是回车键，则触发焦点所在的面板元素的点击事件。

- Alexander Kahoun

---

我会尝试这个，谢谢 :) "live"事件代表什么？这会触发我的点击事件并正确处理我的条件吗？换句话说，它是否像用户实际点击链接一样触发点击事件？难道我不必先聚焦在链接上吗？我在同一页上有几个链接？ - NinaNa

.live是核心jQuery插件中的一个方法，它允许您将事件绑定到尚未呈现的对象。面板本身需要获得焦点，就像您的单击事件一样，是的，它会触发单击事件，就好像用户单击了该特定面板一样。 - Alexander Kahoun