Javascript jQuery.focusout/。单击冲突

我正在做一个有自动完成搜索框的项目。现在我有一个问题，我想把找到的autocompleteresults中的值传递到输入框，但同时，我想在inputfield不太集中时隐藏autocompletebox

现在我和他们两个都有冲突，因为点击autocompletebox会被视为focusout并在传递值之前隐藏该框。对于这类问题有什么建议或解决方法吗？这里有一个jsfiddle让您更清楚

还是在这里

CSS：

#a_c {display:none;}​

$('#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>​

JS：

#a_c {display:none;}​

$('#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>​

HTML：

#a_c {display:none;}​

$('#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>​

​

在类似情况下，我的解决方案是使用超时来暂时推迟在

blur

事件处理程序中执行的操作。像这样：

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

使用如何

：悬停

我用它解决了同样的问题

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

---

我解决这个问题的方法是使用

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（'focusout'）

试试看
我也遇到了类似的问题，比如op，我决定使用这个肮脏的补丁作为解决方案（最后的手段，im必须在截止日期前尽快修复）。这使比赛处于比赛状态，这是一种非常糟糕的做法。我会用这个，谢谢你的回答，但我会投反对票。等待更好的答案。这是一个很棒的解决方案+1.我正在使用txtEmailfield focusout事件验证-是有效的电子邮件。如果以光标为焦点键入无效电子邮件，请立即单击“表单清除”按钮。这导致了冲突。现在，我用超时和非空条件覆盖了代码。感谢you@raina77ow，我面临focusout验证代码的另一个问题，如果验证是通过弹出窗口触发的，请单击“确定”按钮关闭弹出窗口按钮。如果使用
Alt+Tab
交换窗口并将其交换回应用程序窗口，则弹出窗口将继续显示。“如何解决这个问题？”PraneshJanarthanan说。例如，您可能希望限制给定输入的弹出窗口显示数量（即，如果自上次显示弹出窗口以来没有任何变化，为什么要显示它？）但是，请考虑用户到达的状态：如果他们在长时间不活动后切换回该窗口，他们总是记得应该做什么吗？@raina77ow，我明白你的意思了，我需要检查验证前后的数据更新，以便跳过它？但我所做的是。。在验证时，我添加了
inputdemelement.focus（）
。在交换窗口时触发弹出验证循环。现在我删除了焦点，解决了这个问题。我认为这是最好的解决方案。我已经用过了，而且效果很好。谢谢这是我在互联网上找到的最优雅的解决方案。谢谢。如果鼠标悬停在suggestList上，我将按TAB键（如移动到下一个输入）（而不是单击），则不起作用。这应该是可接受的答案，感谢您的调查！最好的解决方案！非常感谢你！