在主流的搜索引擎上搜索時，輸入內容，往往會彈出智能提示。輸入框為input，智能提示區域為suggest。接下來一般有兩種操作：

　　1.選擇某一提示，則把內容復制到input中，自動關閉suggest；

　　2.點擊網頁其他地方，自動關閉suggest。

　　實現第一個可以用click事件，在suggest中增加鼠標click事件，在處理中將點擊的內容寫到input中，然后關閉suggest。單獨測試無問題；實現第二個可以在input元素上增加focusout事件或者blur事件，在input中丟失焦點的時候，關閉suggest。單獨測試無問題。但是放在一起的時候，就會出現問題，只響應了丟失焦點事件（關閉了suggest），卻沒有響應內容點擊事件（沒有獲取點擊的suggest內容）。不明白為什么會沖突，在網上搜，也搜到了一些同樣的問題，有人建議使用blur，但是blur跟focusout是一樣的道理，都不行。

? ? ? ?思前想后，忽然想到click事件的觸發條件，你點擊一個按鍵，觸發一次點擊事件，而一次點擊包括：鼠標點下去，鼠標松開。而jquery的click事件是鼠標松開后才觸發的（事實上button元素和href元素的點擊事件都是這樣），這樣一想就明白剛剛出現的沖突問題了，你點中suggest中的某一提示，這時候input丟失焦點事件觸發，關閉了suggest區域，而這個時候你的鼠標才松開（電腦反應速度要快于鼠標點擊松開速度），完成點擊，但此時鼠標已經不在suggest要選擇的提示上面了，所以也就無法觸發suggest里的點擊事件。

? ? ? ? 想明白了這點，問題就好解決了，把suggest中的響應事假改成mousedown，這樣在鼠標點的時候就會觸發，測試了一下，果然成功了，mousedown事件和focusout事件都得到了正確處理。

//input的丟失焦點事件 $("#input_area").focusout(function(){$("#suggest_div").hide(); });//suggest區域的點擊事件 $("#suggest_div li").mousedown(function(){$("#input_area").val($(this).text());$("#suggest_div").hide(); });

? ? ? ?將click換成mousedown就完全ok了，簡單到我都不好意思說，但是有的時候，也不容易想到哇！

?

? ? ? ?另外，在網上還找到了別的方法，一個是

$("#input_area").keypress(function() {$("#suggest_div").slideDown();}).blur(function() {$("#suggest_div").slideUp();});

? ? ? ?這種方法用隱藏動畫造成了延遲，使得suggest區域的click事件可以觸發。但是slide可不適應所有情況，而且把功能成功與否建立在動畫隱藏的速度快慢上，個人覺得也不太合適。

? ? ? ?另一種方法是將input和suggest用一個div包起來，事件直接加在div上面。這個未測試過，不過理論上應該也是可行的。

?

轉載于:https://www.cnblogs.com/zhaock/archive/2013/04/25/8353236.html

總結

以上是生活随笔為你收集整理的搜索提示时jquery的focusout和click事件冲突问题完美解决的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。