jQuery/js 处理“双焦点”带光标和事件

Question

我正在为菜单启用键盘导航。我在特定情况下遇到了一个问题：

<ul>
    <li><a href="" class="link1">link</a></li>
    <li><a href="" class="link2">link</a></li>
    <li><a href="" class="link3">link</a></li>
</ul>

jQuery:

$('ul').keypress(function (eh){
    var keyPressed = eh.keyCode;
    if (keyPressed=='37'){
        $currentFocusedLink.closest('li').prev('li:first').find('a:first').focus()

};

发生了什么：

我正在捕获箭头键以在菜单之间导航。除非光标位于一个链接的第一个字符之前并且我点击后退箭头，否则这种方法有效。

我认为发生的情况是光标移动，然后捕获按键。由于光标移动到前一个锚标记，因此它会触发焦点。但因为我还捕获按键并分配焦点，所以无论我的焦点事件是什么，都会被调用两次。

有什么办法可以解决这个问题吗？

更新：

这里有一些示例代码，可以尝试更好地了解正在发生的情况。

HTML:

<div class="testNav">
      <a href="">TEST LINK 1</a>
      <a href="">TEST LINK 2</a>
      <a href="">TEST LINK 3</a>
      <a href="">TEST LINK 4</a>
      <a href="">TEST LINK 5</a>
</div>

jQUery:

var $activeLink;

$('.testNav')
    .find('a')
        .focus(function(){
             $activeLink = $(this);      
        })
        .end()
    .keypress(function (eh){
        var keyPressed = eh.keyCode;
        if (keyPressed=='37'){
            $activeLink.prev('a').focus()
        };
     });

请注意，您可以向前和向后切换到每个链接。

现在，点击第 5 个链接并按后退箭头。它将跳转到 LINK 3。再次按下它，它会转到 LINK 1。

我认为原因如上所述......我的脚本应用了焦点，但是将光标移入的操作也是如此前一个锚标记。当您点击后退箭头时，这两种情况都会发生。

Answer 1

您可以使用 jCaret 插件检查光标是否在第一个字符之前并处理这种情况属于边缘情况。

Answer 2

解决方案：

我应该早点想到这一点，但最终的解决方案是将“preventDefault()”附加到按键事件。关键是首先检测按键，然后仅防止您正在查找的特定按键上的默认（否则会失去网页上的键盘功能）。