javascript jQuery .focusout / .click 冲突

jQuery .focusout / .click conflict

提问by Johnny000

I'm working on a project with an autocomplete searchbox. Now I have the issue that I want to pass the value from the found autocompleteresults to the input box, but on the same time, I want the autocompletebox to hide when the inputfield is not more focused.

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

Now I have a conflict going on with both of them since the click on the autocompletebox is seen as focusout and hide the box even before it can pass the value. Any pointers or workarounds for this kind of issue? Here a jsfiddle to make it more clear to you.

现在我和他们两个都发生了冲突，因为点击自动完成框被视为焦点，甚至在它可以传递值之前隐藏框。此类问题的任何指示或解决方法？这里有一个 jsfiddle 让你更清楚。

http://jsfiddle.net/KeGvM/

http://jsfiddle.net/KeGvM/

Or here

或者这里

CSS:

CSS:

#a_c {display:none;}?

JS:

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:

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

回答by raina77ow

My solution in the similar situation was using timeout to temporarily hold off the action taken in blurevent handler. Like this:

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

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

回答by keiwt

How about using

怎么用

:hover

：徘徊

I solved same problem using it.

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

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

回答by Duncan Luk

The way I solved this was using the mousedownevent instead of click. The mousedownevent is alwaystriggered before the focusoutevent while clickis not.

我解决这个问题的方法是使用mousedown事件而不是click. 该mousedown是事件总是前触发的focusout事件，而click不是。

You can try it out in the little demo below. Focus on the field and then click on the button.

您可以在下面的小演示中尝试一下。专注于该字段，然后单击按钮。

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>

As you can see the output is in the following order:

如您所见，输出顺序如下：

1. Mouse down
2. Focus out
3. Click

1. 鼠标按下
2. 专注
3. 点击

This is the most stable solution without using any workaround hacks like timeouts. It also does not depend on jQuery. The only thing worth noting that mousedowndoes not wait for the user to release their mouse button, but in terms of user experience that is not really a concern here.

这是最稳定的解决方案，无需使用超时等任何变通方法。它也不依赖于 jQuery。唯一值得注意的是mousedown不会等待用户释放鼠标按钮，但就用户体验而言，这并不是真正的问题。