天天看點

事件blur與click沖突

練習jQuery,寫評論回複的網頁時遇到的,

問題如下:

事件blur與click沖突

點選評論後,出現回複按鈕,

事件blur與click沖突

點選按鈕後,送出評論。若點其他地方,觸發blur事件,回複按鈕消失。但是此時無論怎麼點回複按鈕都不會觸發click事件。

原因

javascript為單線程,同一時間隻能執行處理一個事件,而blur事件比click優先,是以先觸發了blur事件,但此時按鈕已經消失,無法觸發它click事件。

解決辦法

方法一:

把click事件改為優先級比blur高的mousedown事件,缺點是使用者體驗不好,按下就會發表評論了。

方法二:

給按鈕新增一個mousedown事件,事件裡阻止浏覽器預設事件,即

function(event){event.preventDefault()}
           

此時,點選按鈕,則不會觸發blur事件(沒失去焦點,評論框仍處于獲得焦點狀态),而且click事件也被觸發了。