1

メニューのキーボードナビゲーションを有効にしています。特定の状況で問題が発生しています。

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

};

何が起こるのですか：

メニュー間を移動するための矢印キーをキャプチャしています。これは、カーソルが1つのリンクの最初の文字の前にあり、戻る矢印を押した場合を除いて機能します。

私が思うに、カーソルが移動してからキーが押されたことがキャプチャされます。カーソルが前のアンカータグに移動するため、フォーカスがトリガーされます。ただし、キー押下とフォーカスの割り当てもキャプチャしているため、フォーカスイベントが何であれ2回呼び出されます。

この問題を回避する方法はありますか？

アップデート：

何が起こっているのかをよく理解するために試してみるサンプルコードを次に示します。

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にジャンプします。もう一度押すと、LINK1に移動します。

理由は上記のとおりだと思います...私のスクリプトはフォーカスを適用しますが、カーソルを前のアンカータグに移動する動作も同様です。どちらも、戻る矢印を押すと発生します。

4

2 に答える 2

0

jCaretプラグインを使用して、カーソルが最初の文字の前にあるかどうかを確認し、その状況をエッジケースとして処理できます。

于 2010-02-05T00:07:15.770 に答える
0

解決：

これはもっと早く発生するはずでしたが、最終的な修正は、keypressイベントに「preventDefault（）」を付加することでした。重要なのは、最初にキーの押下を検出し、次に探している特定のキーでのみpreventDefaultを実行することです（そうでない場合は、Webページのキーボード機能が失われます）。

于 2010-02-07T15:11:34.917 に答える