在主流的搜尋引擎上搜尋時,輸入內容,往往會彈出智慧提示。輸入框為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上面。這個未測試過,不過理論上應該也是可行的。
以上是jquery focusout和click事件衝突的問題解決方法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!