jQuery .focusout/.click conflict

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

似たような状況で私のソリューションは、一時的に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

Iはclickはないがmousedownイベントがfocusoutイベントの前にトリガされ、これは、代わりclickのmousedownイベントを使用した解決方法。

以下の小さなデモで試してみることができます。フィールドに注目し、ボタンをクリックします。

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. クリック

このソリューションの唯一の欠点は、ユーザーがマウスボタンを離すのを待たずに、問題がある場合は自分で判断できることです。