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

};

会发生什么：

我正在捕捉箭头键以在菜单之间导航。当光标位于一个链接的第一个字符之前并且我点击后箭头时，这可以使用EXCEPT。

我认为发生的是光标移动然后捕获按键。因为光标移动到前一个锚标记，所以它会触发焦点。但是因为我也在捕捉按键并指定焦点，无论我的焦点事件被调用两次。

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

更新：

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

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（）'附加到keypress事件。关键是首先检测按键，然后只防止你正在寻找的特定键的默认（否则会丢失网页上的键盘功能）。

jQuery / js用光标和事件处理'双焦点'

2 个答案: