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

以上是jquery focusout和click事件衝突的問題解決方法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！