Javascript中click與blur事件的順序詳析
一、現(xiàn)象
最近在開(kāi)發(fā)中碰到了一個(gè)需求,具體需求如下圖。
這是一個(gè)很常見(jiàn)的需求,input框負(fù)責(zé)在點(diǎn)擊回車和失焦的時(shí)候確認(rèn)輸入。button負(fù)責(zé)清除輸入,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í)行代碼,并按照先輸入再點(diǎn)擊按鈕取消的操作,結(jié)果如下:
可以看到,input blur在button的click之前觸發(fā)了,這就導(dǎo)致取消操作其實(shí)并沒(méi)有起到作用。
同時(shí),也能發(fā)現(xiàn)事件的執(zhí)行順序?yàn)?input-blur) -> (button-click);
二、解決方案1
最簡(jiǎn)單的解決方案為:將button的時(shí)間換成onmousedown事件,可以得到如下結(jié)果:
事件順序正確了,但是這種解決方式有兩個(gè)問(wèn)題:
a)無(wú)法在按下按鈕后取消點(diǎn)擊
b)控制blur是否執(zhí)行,需要額外的代碼
那么有木有進(jìn)一步解決方案呢?
三、解決方案2
對(duì)button同時(shí)綁定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(); });
這樣的方式,就克服了第一種方案的兩個(gè)弊端,也完美的解決了需求。
四、執(zhí)行順序探秘
查詢w3c標(biāo)準(zhǔn)后,沒(méi)有發(fā)現(xiàn)關(guān)于blur和mousedown,click的順序說(shuō)明。根據(jù)猜測(cè),blur需要mousedown執(zhí)行默認(rèn)事件來(lái)觸發(fā)。所以總結(jié)事件順序應(yīng)為:mousedown->(other)blur->mouseup->click
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
js獲取異步函數(shù)數(shù)據(jù)的實(shí)現(xiàn)
本文主要介紹了js獲取異步函數(shù)數(shù)據(jù)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02JavaScript暫時(shí)性死區(qū)以及函數(shù)作用域
這篇文章主要為大家介紹了JavaScript暫時(shí)性死區(qū)以及函數(shù)作用域示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07js前端對(duì)于大量數(shù)據(jù)的展示方式及處理方法
這篇文章主要介紹了js前端對(duì)于大量數(shù)據(jù)的展示方式及處理方法,幫助大家更好的理解和使用js,感興趣的朋友可以了解下2020-12-12JavaScript高級(jí)程序設(shè)計(jì) 讀書(shū)筆記之九 本地對(duì)象Array
本地對(duì)象Array,數(shù)組等操作函數(shù)2012-02-02JS實(shí)現(xiàn)簡(jiǎn)單控制視頻播放倍速的實(shí)例代碼
這篇文章主要介紹了通過(guò)JS來(lái)實(shí)現(xiàn)簡(jiǎn)單控制視頻播放倍速,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-04-04javascript中字符串替換函數(shù)replace()方法與c# 、vb 替換有一點(diǎn)不同
JavaScript 不像和c# vb.net 中一樣 直接就可以替換所以的要替換的字符2010-06-06Javascript 獲取鏈接(url)參數(shù)的方法[正則與截取字符串]
有時(shí)我們需要在客戶端獲取鏈接參數(shù),一個(gè)常見(jiàn)的方法是將鏈接當(dāng)做字符串,按照鏈接的格式分解,然后獲取對(duì)應(yīng)的參數(shù)值。本文給出的就是這個(gè)流程的具體實(shí)現(xiàn)方法。2010-02-02