Javascript中click與blur事件的順序詳析
一、現(xiàn)象
最近在開發(fā)中碰到了一個需求，具體需求如下圖。
這是一個很常見的需求，input框負責在點擊回車和失焦的時候確認輸入。button負責清除輸入，input綁定代碼為：
input.addEventListener('blur',function(){
console.log('input blur');
});
input.addEventListener('keyup',function(){
console.log('input keyup');
});
"X"綁定的代碼為：
button.addEventListener('click', function(e){
console.log('button click');
});
嘗試著執(zhí)行代碼，并按照先輸入再點擊按鈕取消的操作，結(jié)果如下：
可以看到，input blur在button的click之前觸發(fā)了，這就導致取消操作其實并沒有起到作用。
同時，也能發(fā)現(xiàn)事件的執(zhí)行順序為(input-blur) -> (button-click);
二、解決方案1
最簡單的解決方案為：將button的時間換成onmousedown事件，可以得到如下結(jié)果：
事件順序正確了，但是這種解決方式有兩個問題：
a）無法在按下按鈕后取消點擊
b）控制blur是否執(zhí)行，需要額外的代碼
那么有木有進一步解決方案呢？
三、解決方案2
對button同時綁定mousedown和blur事件即可，具體代碼和執(zhí)行結(jié)果如下：
button.addEventListener('mousedown', function(e){
console.log('button mousedown');
e.preventDefault();
});
button.addEventListener('click', function(e){
console.log('button click');
input.blur();
});
這樣的方式，就克服了第一種方案的兩個弊端，也完美的解決了需求。
四、執(zhí)行順序探秘
查詢w3c標準后，沒有發(fā)現(xiàn)關(guān)于blur和mousedown，click的順序說明。根據(jù)猜測，blur需要mousedown執(zhí)行默認事件來觸發(fā)。所以總結(jié)事件順序應為：mousedown->（other）blur->mouseup->click
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了js實現(xiàn)文本框?qū)挾茸赃m應文本寬度的方法,可實現(xiàn)根據(jù)文本框內(nèi)容動態(tài)改變寬度的功能,涉及javascript動態(tài)操作頁面元素屬性的技巧,需要的朋友可以參考下2015-08-08
這篇文章主要給大家介紹了關(guān)于JS實現(xiàn)深拷貝的4種方式,深拷貝是指將一個對象完整地拷貝一份,不受原對象影響,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細介紹了js獲取USB掃碼槍數(shù)據(jù)的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
webstorm應該是目前最強的js編輯器了，結(jié)合sublime text可以很效率的開發(fā)項目。下面這篇文章主要給大家整理了一些Mac系統(tǒng)下Webstorm快捷鍵的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
JavaScript中的sort函數(shù)可以用來對數(shù)組進行排序,默認情況下sort函數(shù)將數(shù)組中的元素轉(zhuǎn)換為字符串,并按照Unicode碼點的順序進行排序,下面這篇文章主要給大家介紹了關(guān)于js中.sort()函數(shù)的常見用法與高級操作的相關(guān)資料,需要的朋友可以參考下2023-05-05
用jquery.sortElements實現(xiàn)table排序
實現(xiàn)table排序，網(wǎng)上有很多解決方案，很多都基于jQuery，最后我選擇用sortElements，實現(xiàn)很簡單2014-05-05
11種JavaScript前端數(shù)據(jù)去重方式總結(jié)
這篇文章主要為大家總結(jié)了JavaScript去重的11種方式，各有優(yōu)缺點，文中的示例代碼講解詳細，具有一定的學習價值，需要的可以根據(jù)需求合理使用2023-06-06
node.js+express+mySQL+ejs+bootstrop實現(xiàn)網(wǎng)站登錄注冊功能
這篇文章主要介紹了node.js+express+mySQL+ejs+bootstrop實現(xiàn)網(wǎng)站登錄注冊功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-01-01
本文系統(tǒng)介紹了javascript的window對象以及一些控制函數(shù)的用法,僅供大家參考2016-11-11
彈出新的網(wǎng)頁窗口的方法有很多，在本文為大家介紹下使用js的window.open方法來實現(xiàn)，需要的朋友可以了解下2014-01-01