jQuery.focusout/.单击冲突

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

我解决此问题的方法是使用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 2

使用怎么样

：悬停

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

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

Answer 3

在类似情况下，我的解决方案是使用超时来暂时推迟在blur事件处理程序中执行的操作。像这样：

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