jQuery .focusout / .click冲突

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

现在我和他们两个都发生了冲突，因为自动完成框上的点击被视为聚焦，并且在它可以传递值之前隐藏了该框。 针对此类问题的任何指针或解决方法？ 这里有一个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 ：

  
hello world
​ 

Answer 1

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

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

Answer 2

如何使用

：徘徊

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

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

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')); 

  Try it