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