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處理與光標和事件'雙重焦點'

回答

相關問題