jQuery .focusout/.click衝突

我正在使用自動完成搜索框來處理項目。現在我遇到了問題，我想將找到的自動完成結果的值傳遞給輸入框，但同時，我希望autocompletebox在輸入字段不更集中時隱藏。jQuery .focusout/.click衝突

現在我與他們兩人都有衝突，因爲單擊autocompletebox被視爲focusout，並且在它可以傳遞值之前隱藏框。任何指針或這種問題的解決方法？這裏有一個讓你更清楚的jsfiddle。

或者這裏

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>

來源

2012-12-20 Johnny000

我在類似情況的解決方案是使用超時暫時推遲在blur事件處理程序所採取的行動。就像這樣：

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

來源

2012-12-20 21:09:39 raina77ow

非常好的解決方法imo。感謝您的快速回復！ – Johnny000

我有類似的問題，我決定使用這個骯髒的修補程序作爲解決方案（最後的手段和即時通訊截止日期必須儘快解決這個問題）。這使事件處於競爭狀態，這是一個非常糟糕的做法。我會用這個，謝謝你的回答，但會倒下。等待更好的答案。 – Sharky

如何使用

：懸停

我用它解決了同樣的問題。

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

來源

2014-11-21 03:03:39 keiwt

我認爲這是最好的解決方案。我已經使用它，它完美的作品。謝謝！ – ZanattMan

這是我在互聯網上找到的最優雅的解決方案。謝謝。 –

如果鼠標懸停的建議列表，我會按TAB鍵（如移動到下一個輸入）（而不是點擊）** [JSFIDDLE]（http://jsfiddle.net/KeGvM/61/）** – bsbak

我解決了這個用的是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>

正如你可以看到輸出是按以下順序：

鼠標按下
對焦出
點擊

這個解決方案的唯一缺點是它不會等待用戶釋放他們的鼠標按鈕，但是如果這是一個問題，您可以自己決定。

來源

2017-12-22 16:50:50

這應該是接受回答，感謝您的調查！ –

jQuery .focusout/.click衝突

回答

相關問題