jQuery .focusout / .click冲突

Question

我正在用一个自动完成的搜索框做一个项目。现在，我有一个问题，我想将从找到的自动完成结果的值传递到输入框，但同时，当输入字段没有更集中时，我希望自动完成框隐藏。

现在，我和它们都有了冲突，因为单击自动完成框被看作是焦点，甚至在它能够传递值之前就隐藏了这个框。对于这种问题，有什么建议或解决办法吗？这是一个让你更清楚的小把戏。

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;
});​

<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

在类似情况下，我的解决方案是使用超时值暂时阻止在blur事件处理程序中采取的操作。如下所示：

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

Answer 2

我解决这个问题的方法是使用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并不是等待用户发布鼠标按钮，而是在用户体验方面，这并不是真正值得关注的问题。

Answer 3

不如用

*悬停

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

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