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

使用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);
};

Answer 2

你的.blur()处理程序没有替换以前的keydown处理程序，它正在添加另一个。（随后的焦点和模糊事件会不断增加。）

尝试使用$(document).off('keydown')处理程序中的$(document).unbind('keydown')或.blur()删除以前的keydown处理程序。

.off() method是jQuery 1.7中的新功能，并与.on()配对，但对于旧版本，您可以使用.unbind() method。如果您看一下我链接到的doco，您会看到jQuery让您可以控制哪些处理程序未被绑定，但在您的情况下，使用事件名称的简单语法应该没问题。

Jquery - 使用列表焦点上的箭头键禁用窗口滚动

2 个答案: