代码之家  ›  专栏  ›  技术社区  ›  DA.

jQuery/js使用游标和事件处理“双焦点”

  •  1
  • DA.  · 技术社区  · 16 年前

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

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

    jQUery:

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

    现在,点击第五个链接并按下后退箭头。它将跳转到链接3。再次按下它,它将跳转到链接1。

    2 回复  |  直到 16 年前
        1
  •  0
  •   Alex Sexton    16 年前

    你可以使用 jCaret 插件,用于检查光标是否位于第一个字符之前,并将该情况作为边缘大小写处理。

        2
  •  0
  •   DA.    16 年前

    解决方案: