一、現(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ì)武林網(wǎng)的支持。