Jquery - リストのフォーカスにある矢印キーでウィンドウのスクロールを無効にする

Question

上下矢印キーを使用してリストをナビゲートできるようにしようとしていますが、これらのキーを押すとウィンドウがスクロールして非常に迷惑になります。だから私は、このボックスがフォーカスされているときに矢印キーを使ってページの移動を無効にしたいと思う。

私が試した：

$('.selectionList').focus(function(event){ 
    $(document).keydown(function(e) { 
    return false; 
    }); 
}); 

$('.selectionList').blur(function(event){ 
    $(document).keydown(function(e) { 
    return true; 
    }); 
}); 

しかし、再有効化これらのキーのページに動作しませんでしたが、スクロールバーなしでスクロールしないでしょう。私が使用できるthisが見つかりましたが、これは永久にこれらのキーの使用を無効にします。これは起こりたくありません。

$（ 'selectionList。'）からkeyup（）イベントは次のようである：。

$('.selectionList').keyup(function(event){ 
    if (event.keyCode == 13)  //enter 
    { 
     $('.listNameBox a').click(); 
    } 
    else 
    { 
    if ((event.keyCode == 38) && ($(this).children('li:eq(' + ($('.selectionList li.selected').index() - 1) + ')').length > 0)) //up 
     { 
      selectListItem($(this).children('li:eq(' + ($('.selectionList li.selected').index() - 1) + ')')); 
     } 
    else if ((event.keyCode == 40) && ($(this).children('li:eq(' + ($('.selectionList li.selected').index() + 1) + ')').length > 0)) //down 
     { 
      selectListItem($(this).children('li:eq(' + ($('.selectionList li.selected').index() + 1) + ')')); 
     }; 
    } 
}); 

任意の助けをいただければ幸いです。

Answer 1

.blur()ハンドラは以前のkeydownハンドラを置き換えるものではなく、もう1つ追加します。 （そしてその後のフォーカスとブラーイベントはますます多く追加され続けます）.blur()ハンドラで$(document).off('keydown')または$(document).unbind('keydown')を代わりに使用して、以前のkeydownハンドラを削除してみてください。

.off() methodは、jQuery 1.7で新しく追加され、.on()とペアになっていますが、古いバージョンでは.unbind() methodを使用できます。私がリンクしているドコモを見れば、jQueryはどのハンドラーがアンバインドされているかを正確に制御できますが、イベント名を使った簡単な構文は問題ありません。

Answer 2

jQuery .on()と.off()のような結合イベントが挿入されています。それはあなたの問題を解決するでしょう。

function prevent(event){ 
event.preventDefault(); 
return false; 
} 


$('.selectionList').on('focus', function(){ 
    $(this).on('keydown', prevent); 
}); 
$('.selectionList').on('blur', function(e){ 
$(this).off('keydown', prevent); 
};