關於JavaScript元素的Tabindex

我有一個側面導航點（點擊這些點上的每個點滾動來定位頁面）。關於JavaScript元素的Tabindex

爲了便於使用，我希望用戶能夠通過點標籤。我已經設置了一個<span>元素來包裹每個點的錨和tabindex工作正常，但是..

我希望點擊事件被觸發，當他們在導航元素上選項卡。即：如果他們選項卡點2，它應該模仿一個點擊事件，以便將它們帶到該錨點。

可能嗎？

2013-07-02 DT.DTDG

如果我理解正確，我認爲您應該能夠通過聽到點上的「焦點」事件並在您收到點時模擬點上的點擊來解決您的問題。有幾種方法可以做到這一點，具體取決於你使用的是什麼框架（如果有的話）。例如，如果你正在使用jQuery，並且點由具有「點」類鑑定：

$('.dot').focus(function(e) { 
    e.target.click(); 
}

這裏有一個小的測試頁，我放在一起 - 這似乎在這兩個IE10工作， Chrome：

<html> 
    <head> 
     <script type="text/javascript"> 
      function handleOnLoad() { 
       var elems = document.getElementsByTagName("span"); 
       var i; 
       for (i = 0; i < elems.length; ++i) { 
        elems[i].onfocus = function(event) { 
         if (event.target) { 
          event.target.firstChild.firstChild.click(); 
         } 
         else if (event.srcElement) { 
          event.srcElement.firstChild.firstChild.click(); 
         } 
        } 
       } 
      } 
     </script> 
    </head> 
    <body onload="handleOnLoad()"> 
     <span class="focus" tabindex="1"><ul class="inactive" tag="scroller"><a href="#scroll1">Foo</a></ul></span> 
     <span class="focus" tabindex="2"><ul class="inactive" tag="scroller"><a href="#scroll2">Bar</a></ul></span> 
     <span class="focus" tabindex="3"><ul class="inactive" tag="scroller"><a href="#scroll3">Baz</a></ul></span> 
     <span class="focus" tabindex="4"><ul class="inactive" tag="scroller"><a href="#scroll4">Ban</a></ul></span> 
    </body> 
</html>

來源

2013-07-02 03:57:52

謝謝Ben本人稍後會簡短介紹一下。 –

嘿@Ben S.它沒有完全工作：/我有一個'span'環繞錨點，以便它可以被選中。我的HTML是這樣的

' - 那麼我怎樣才能在'ul' '當焦點在圍繞它的'span'時？ –

這聽起來像是它應該工作，如果你改變'e.target.click（）;'爲'$（'a'，e.target）.click（）;'。如果你知道你的標記中沒有任何空格，如果你不想再做另一個查詢，'e.target.firstChild.firstChild.click（）;'也應該可以工作。 –

關於JavaScript元素的Tabindex

回答

相關問題