☰

jQuery .focusout / .click の競合 質問する

tag-icon • tag-icon javascript jquery
jQuery .focusout / .click の競合 質問する

私はオートコンプリート検索ボックスのあるプロジェクトに取り組んでいます。現在、見つかったオートコンプリート結果の値を入力ボックスに渡したいのですが、同時に、入力フィールドにフォーカスが当たっていないときはオートコンプリートボックスを非表示にしたいという問題があります。

現在、オートコンプリートボックスをクリックするとフォーカスアウトと見なされ、値を渡す前にボックスが非表示になるため、両方で競合が発生しています。この種の問題に対するヒントや回避策はありますか? より明確にするために、jsfiddle を次に示します。

http://jsfiddle.net/KeGvM/

またはこちら

CS:

#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>​

ベストアンサー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ユーザーがマウス ボタンを放すのを待たないことですが、ユーザー エクスペリエンスの観点からは、ここではそれほど問題ではありません。

おすすめ記事