1

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

<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>

查询：

变量 $activeLink;

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

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

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

我认为原因如上所述......我的脚本应用了焦点，但是将光标移动到前一个锚标记的行为也是如此。当您击中后退箭头时，两者都会发生。

4

2 回答 2

0

解决方案：

这应该早点发生在我身上，但最终的解决方法是将“preventDefault()”附加到按键事件。关键是首先检测按键，然后只在您正在寻找的特定键上使用 preventDefault （否则会失去网页上的键盘功能）。

于 2010-02-07T15:11:34.917 回答
0

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

于 2010-02-05T00:07:15.770 回答