在處理表單登錄的過程中裸扶，遇到了一個(gè)問題左驾，當(dāng)我們在輸入框輸入內(nèi)容輸入框獲取到焦點(diǎn)時(shí)允坚，輸入框后面會出現(xiàn)一個(gè)圖標(biāo)刪除已輸入的內(nèi)容匹层，因此刪除圖標(biāo)會綁定一個(gè)click事件隙笆，但是當(dāng)我們點(diǎn)擊圖標(biāo)的時(shí)候，也觸發(fā)了input的blur事件，blur事件會讓input失去焦點(diǎn)時(shí)隱藏刪除的圖標(biāo)撑柔，并且blur事件先于圖標(biāo)的click事件執(zhí)行煤率，因此這時(shí)候點(diǎn)擊圖標(biāo)并不會刪除輸入框已輸入的內(nèi)容，而是圖標(biāo)消失了乏冀，那么這個(gè)結(jié)果就不是我們想要的蝶糯，那怎么解決這個(gè)問題呢？
我們先看下blur和click事件
blur事件：當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)blur事件辆沦；早前昼捍，blur 事件僅發(fā)生于表單元素上。在新瀏覽器中肢扯，該事件可用于任何元素妒茬，blur和focus事件不會冒泡，其他表單事件都可以蔚晨。
click事件：當(dāng)點(diǎn)擊元素時(shí)觸發(fā)click事件乍钻；所有元素都有此事件，會產(chǎn)生冒泡铭腕。
問題產(chǎn)生的原因：
這是因?yàn)閎lur事件比click事件先觸發(fā)银择，而javascript為單線程，同一時(shí)間只能執(zhí)行處理一個(gè)事件累舷，所以當(dāng)blur執(zhí)行時(shí)浩考，導(dǎo)致其后續(xù)click事件并不會執(zhí)行
解決方法一：如果讓click事件比blur事件先觸發(fā)就沒有問題了，因此可以給blur事件加定時(shí)器延遲觸發(fā)
/*刪除圖標(biāo)的點(diǎn)擊事件*/
$(".delete-icon").on("click",function () {
$(this).prev("input").val("").focus();
});
/*輸入框失去焦點(diǎn)的blur事件*/
$("input[name='username'],input[name='password']").on("blur",function () {
var $this = $(this);
setTimeout(function(){
$this.parent().removeClass("active");
$this.next(".delete-icon").hide();
},250)
});
缺點(diǎn)：設(shè)置多久的延時(shí)是一個(gè)難以兩全的問題被盈，時(shí)間太短不能保證click事件的100%觸發(fā)析孽，時(shí)間太長則會造成卡頓的感覺，影響用戶體驗(yàn)
解決方法二：將click事件改為mousedown事件只怎，mousedown事件是優(yōu)先于blur事件執(zhí)行
/*刪除圖標(biāo)的點(diǎn)擊事件*/
$(".delete-icon").on("mousedown",function () {
$(this).prev("input").val("").focus();
});
/*輸入框失去焦點(diǎn)的blur事件*/
$("input[name='username'],input[name='password']").on("blur",function () {
var $this = $(this);
$this.parent().removeClass("active");
$this.next(".delete-icon").hide();
});
缺點(diǎn)：鼠標(biāo)按下便觸發(fā)了事件袜瞬，不收起邓尤、長按也會觸發(fā)盾沫，可能造成用戶體驗(yàn)不好
解決方法三：給圖標(biāo)再添加一個(gè)mousedown事件赴精，在其中執(zhí)行event.preventDefault()阻止瀏覽器默認(rèn)事件，這樣點(diǎn)擊按鈕時(shí)輸入框就不會失去焦點(diǎn)了
/*阻止瀏覽器默認(rèn)事件*/
$(".delete-icon").on("mousedown",function(e) {
e.preventDefault();
})
/*刪除圖標(biāo)的點(diǎn)擊事件*/
$(".delete-icon").on("click",function () {
$(this).prev("input").val("").focus();
});
/*輸入框失去焦點(diǎn)的blur事件*/
$("input[name='username'],input[name='password']").on("blur",function () {
var $this = $(this);
$this.parent().removeClass("active");
$this.next(".delete-icon").hide();
});
解決方法四：動態(tài)綁定blur事件莲蜘，當(dāng)鼠標(biāo)進(jìn)入input框父級元素時(shí)帘营，移除input綁定事件blur芬迄，當(dāng)鼠標(biāo)移出輸入框父級元素時(shí)禀梳，給input綁定blur事件
/*動態(tài)綁定blur事件*/
$(".login-con li").mouseenter(function(){
$(this).find("input").unbind("blur");
});
$(".login-con li").mouseleave(function(event){
$(this).find("input").bind("blur");
});
/*刪除圖標(biāo)的點(diǎn)擊事件*/
$(".delete-icon").on("click",function () {
$(this).prev("input").val("").focus();
});
/*輸入框失去焦點(diǎn)的blur事件*/
$("input[name='username'],input[name='password']").on("blur",function () {
var $this = $(this);
$this.parent().removeClass("active");
$this.next(".delete-icon").hide();
});
推薦使用方法三算途、方法四
原文作者技術(shù)博客：http://www.reibang.com/u/ac4daaeecdfe
95后前端妹子一枚，愛閱讀扫外，愛交友廓脆，將工作中遇到的問題記錄在這里，希望給每一個(gè)看到的你能帶來一點(diǎn)幫助狞贱。
歡迎留言交流
