jQuery .focusout/.click冲突

Question

我正在开发一个带有自动完成搜索框的项目.现在我有一个问题,我想将找到的自动完成结果中的值传递给输入框,但同时,我希望自动完成框在输入字段不是更集中时隐藏.

现在我和它们都发生冲突,因为自动完成框上的点击被视为焦点并且在它可以传递值之前隐藏框.针对此类问题的任何指针或解决方法？这里有一个jsfiddle,让你更清楚.

http://jsfiddle.net/KeGvM/

或者在这里

CSS:

#a_c {display:none;}?

JS:

$('#search_field').focusout(function() {
    $('#a_c').hide(); // IF I DELETE THIS IT WORKS
});

$('#search_field').focusin(function() {
    $('#a_c').show();
});

$('#a_c a').click(function() {
    $('#search_field').val('');
    var value = $(this).text();
    var input = $('#search_field');
    input.val(input.val() + value);
    $('#a_c').hide();
    return false;
});?

HTML:

<input autocomplete="off" onkeyup="searchFor(this.value);" name="search" id="search_field" class="bold" type="text" placeholder="Search...">
<div id="a_c"><a href="">hello world</a></div>?

Answer 1

如何使用

:徘徊

我用它解决了同样的问题.

$('className').on('focusout', function(e) {
    if($('.suggestLi' + ':hover').length) {
        return;
    }
    $('.suggestList').empty();
});

Answer 2

我在类似情况下的解决方案是使用超时来暂时阻止在blur事件处理程序中执行的操作.像这样:

$('#search_field').focusout(function() {
    window.setTimeout(function() { $('#a_c').hide() }, 100);
});

Answer 3

我解决这个问题的方式是使用mousedown事件代替click.该mousedown是事件总是前触发的focusout事件,而click不是.

您可以在下面的小演示中试一试.专注于该字段,然后单击按钮.

const field = document.getElementById('field');
const btn = document.getElementById('btn');

btn.addEventListener('click', () => console.log('Click'));
btn.addEventListener('mousedown', () => console.log('Mouse down'));
field.addEventListener('focusout', () => console.log('Focus out'));

<input id="field">
<button id="btn">Try it</button>

如您所见,输出的顺序如下:

1. 鼠标按下
2. 专注
3. 点击

这是最稳定的解决方案,无需使用超时等任何变通方法.它也不依赖于jQuery.唯一值得注意的是mousedown不等待用户释放他们的鼠标按钮,但在用户体验方面并不是真正关注的问题.