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

我启用菜单的键盘导航。我遇到一个问题，在特定情况下：jQuery/js处理与光标和事件'双重焦点'

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

};

发生了什么：

我正在捕获箭头键以在菜单之间导航。当光标位于一个链接的第一个字符之前，并且我点击后退箭头时，此功能才有效。

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

任何方法来解决这个问题？

UPDATE：

这里有点示例代码尝试让正在发生的事情是一个好主意。

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：

变量$ 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.按它去链接1.

我认为原因如上...我的脚本应用于重点说明，但这样做将光标移动到的行为以前的锚标签。当你击中后退箭头时都会发生。

来源

2010-02-04 DA.

为什么你不想使用浏览器的内置键盘导航？ – 2010-02-04 23:10:02

@sean tabbing仍然按原样工作。虽然（我省略了所有额外的标记以表明这一点），但箭头键并不能在下拉菜单中的链接之间进行良好的导航。 – 2010-02-04 23:16:29

SOLUTION：

这应该发生在我身上越快，但最终的修复是“的preventDefault（）”连接到按键事件。关键是首先检测按键，然后只在您要查找的特定按键上防止默认（或者在网页上丢失键盘功能）。

来源

2010-02-07 15:11:34

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

来源

2010-02-05 00:07:15

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

回答

相关问题