javascript - 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

我解决这个问题的方法是使用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 不会等待用户释放鼠标按钮，但就用户体验而言，这并不是这里真正关心的问题。