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

　　1.選擇某一提示，則把內(nèi)容復(fù)制到input中，自動關(guān)閉suggest；

　　2.點擊網(wǎng)頁其他地方，自動關(guān)閉suggest。

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

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

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

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

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

?

? ? ? ?另外，在網(wǎng)上還找到了別的方法，一個是

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

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

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/zhaock/archive/2013/04/25/8353236.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。