首頁 >web前端 >js教程 >jquery focusout和click事件衝突的問題解決方法分享

jquery focusout和click事件衝突的問題解決方法分享

黄舟
黄舟原創
2017-06-27 13:28:131517瀏覽

  在主流的搜尋引擎上搜尋時,輸入內容,往往會彈出智慧提示。輸入框為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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn