搜索提示時jquery的focusout和click事件沖突問題完美解决
在主流的搜索引擎上搜索時,輸入內容,往往會彈出智能提示。輸入框为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上面。這個未測試過,不過理論上應該也是可行的。 |
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。