搜索提示時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上面。這個未測試過,不過理論上應該也是可行的。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。