如何解決blur事件和click事件衝突問題?

如圖,有一個輸入框和一個登錄按鈕。

當焦點在輸入框的時候,直接點擊登錄按鈕,會觸發blur事件和click事件.

現在,我想click事件的時候,不觸發blur事件,如何解決?

網上找的兩個方法,想問還要沒有別的方法?

1.如果click事件比blur事件早觸發就沒有問題了,所以可以給blur事件加一個時間(延遲觸發),如:setTimeout(fn, 250);

2. 添加mouseover,mouseout 。前者刪除blur事件,後者添加回來。滑鼠在click執行之前先執行了mouseover事件,刪除blur就不會隱藏了,然後點擊完成後,mouseout再把blur添加回來,就行了。(mouseover ,mouseout不會轉移焦點)

---------------------------更新-------------------------------------

這是在移動前端,html頁面,用的庫是zepto

1.這個輸入框是個輸入密碼的框,離開輸入框的時候,會對輸入框里的內容進行校驗,看看是否符合密碼規則.

2.點擊登錄按鈕的時候,還會對輸入框里的內容進行校驗.

以上兩層校驗,離開輸入框的校驗我是綁定的blur事件,登錄按鈕校驗綁定的是tap事件.

----更新--------

這是我這裡統一用到的浮框提示,出錯的時候用這個.

HTML5的validate api 出錯的提醒框是這樣的:

HTML5的這個樣式應該是瀏覽器本身的吧?chrome和ie的這個提醒模樣不一樣,出錯的時候可以不用這個默認的?


登錄按鈕發生click的前提是登錄按鈕focus了。而登錄按鈕focus了,必然原來focus的控制項要blur。UI交互邏輯本身必然是這樣的。

所以你的問題估計是你在blur事件監聽里做了某些不該在blur里做的事情,才會有所謂的衝突。建議你更詳細的描述需求和現在實際代碼所作的事情。我們可以看看到底應該怎麼實現。

----

更新:

按題主描述,blur是為了做validating。那麼顯然不應該用blur,可以用input事件。也可以再綁個change事件來應對老瀏覽器。

總體上我建議使用HTML5 validity api,這樣提交時校驗是自動的。不用自己折騰,寫出來的校驗代碼都跟義大利面一樣。

簡單的HTML5校驗代碼示例:http://jsfiddle.net/h6Laa6z6/2/


把 click 綁在事件的 capture 階段,或者寫個 timer 固定頻率檢查 input 中的值


通過mouse事件做控制這種天(bai)才(ci)的思路真是讓人無語。。。這個世界上有種東西叫:鍵盤。


加個lock,blur 後在 lock == true 的條件下直接return。什麼時候解鎖就看你情況了。


首先要明白的是click事件的的觸發條件:滑鼠點下去,滑鼠鬆開。而jquery的click事件是滑鼠鬆開後才觸發的。

樓主說的情況不是事件衝突,而是頁面結構變化導致綁定click的按鈕沒有被click到(這個你可以在click的handler中打斷點來驗證)。

詳細點說就是:點擊時候input觸發了blur,顯示了錯誤消息(或其他頁面結構變化),而這時候再鬆開滑鼠,完成Click,但此時滑鼠已經不在被綁定Click的元素上了,所以也就無法觸發Click事件。

理解了Click事件的兩步,這個問題就容易解決了,解決方案是mousedown來代替click來綁定事件


在 input 上綁 blur 事件,無外乎三種行為:1. 取消 input 的 focus 樣式 2. 做數據校驗 3. 用戶輸入完成後自動觸發某種行為(如發送手機驗證碼)

純從用戶體驗的角度,對1來說,瀏覽器默認行為沒什麼不好。對於2,更合理的體驗應該是把校驗改成輸入框數據變化時來做。

$("input").on("input", function() {
// validate
});

// or

$("input").on("keypress", function() {
clearTimeout(timer);
timer = setTimeout(validate, 200);
});

至於3,blur 事件其實必須觸發於 button 的 click 之前,因為操作沒完成的話表單不應該提交。

題目描述里的方案二簡直是噩夢。自以為聰明的解決辦法而已,維護起來會非常麻煩。

我不知道樓主你在糾結什麼。

另外,表單提交前的動作,最好不要綁在 button 的 click 事件,盡量用 $(form).on("submit");


使用mousedown吧騷年,移動端我沒測過


正好看了你那個延時驗證的,我的是實現了,這個方法也挺好,跟上面說的在冒泡階段觸發 click的類似,感覺這種方法更簡單一些


在登錄按鈕上通過hover控制鎖,blur的時候做判斷。

ps:這樣效率好點,只是blur事件會觸發


推薦閱讀:

最近在自學前端,需要買域名和伺服器嗎?
阿里巴巴iconfont怎麼是正確的使用方式?
關於valueOf執行順序問題?
谷歌地圖的顯示方式是如何做到的?
Facebook 首頁都使用了哪些技術提高訪問速度?

TAG:前端開發 | JavaScript | 前端開發框架和庫 |