Question

输入后来自服务器的HTML响应示例：

<ul class="datalistPlaceholder hidden" style="display: block;">
    <li><a class="tag" href="#">#<span style="font-weight: bold">ar</span>igato</a></li>
    <li><a class="tag" href="#">#<span style="font-weight: bold">ar</span>izona</a></li>
    <li><a class="tag" href="#">#cle<span style="font-weight: bold">ar</span>water</a></li>
</ul>

jQuery的：

$(document).ready(function(){   
    $('#search-field').keyup(function(e) {
        ajaxAutocomplete.call(this, e);
    });
});

function ajaxAutocomplete(e) {
    var hash_tag = $.trim($(this).val());

    $.ajax({
        url     : 'autocomplete.php',
        method  : 'GET',
        dataType: 'html',
        data    : {tag : hash_tag}
    })
    .done(function(response) {
        if (response) {
            $('.datalistPlaceholder').html(response).show();

            if (e.keyCode === 40) { // down key
                $('.tag:first').focus();
                $('.tag').keydown(function(e) {
                    down.call(this, e);
                });
            } else if (e.keyCode === 38) { // up key
            }
        } else {
            $('.datalistPlaceholder').hide();
        }
    })
    .fail(function() {
        alert('Something went wrong');
    });
}

function down(e)
{
    if (e.keyCode === 40) {
        $(this).parent('li').next().find('.tag').focus();
        // stops page from scrolling
        return false;
    }
}

当用户使用向下箭头键从下拉菜单中选择一个选项时，页面会滚动。我认为返回false会阻止这种情况。我做错了什么？

Answer 1

这种情况正在发生，因为你有这个：

$('.tag').keydown(function(e) {
    down.call(this, e);
});

不确定为什么你这样做而不是直接使用down，但你不返回down()返回的内容，这样你的匿名回调函数就会返回undefined而不是false

直接使用down作为回调函数或执行额外的返回

$('.tag').keydown(down);
//or
$('.tag').keydown(function(e) {
    return down.call(this,e)
});

请注意，您也可以调用e.preventDefault()而不是返回false以防止默认操作。

作为旁注，$('.tag').keydown(function(e)...回调中的done每次都会继续为那些可能不会被$('.datalistPlaceholder').html(response)销毁的元素添加新的事件处理程序。您可以使用委托事件，这样您只需创建一次处理程序：

$(document).ready(function(){
   $('.datalistPlaceholder').on("keydown",".tag",down);
});

jQuery返回false而不是停止在keydown上滚动

1 个答案: