欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript中click與blur事件的順序詳析

 更新時間:2017年04月25日 10:44:39   作者:zakwu  
這篇文章主要給大家介紹了關(guān)于Javascript中click與blur事件順序的相關(guān)資料,文中介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Javascript中的click與blur事件具有一定的參考學(xué)習(xí)價值,需要的朋友可以下面來一起看看吧。

一、現(xiàn)象

最近在開發(fā)中碰到了一個需求,具體需求如下圖。

這是一個很常見的需求,input框負(fù)責(zé)在點(diǎn)擊回車和失焦的時候確認(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í)并沒有起到作用。

同時,也能發(fā)現(xiàn)事件的執(zhí)行順序?yàn)?input-blur) -> (button-click);

二、解決方案1

最簡單的解決方案為:將button的時間換成onmousedown事件,可以得到如下結(jié)果:

事件順序正確了,但是這種解決方式有兩個問題:

     a)無法在按下按鈕后取消點(diǎn)擊

     b)控制blur是否執(zhí)行,需要額外的代碼

那么有木有進(jìn)一步解決方案呢?

三、解決方案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標(biāo)準(zhǔn)后,沒有發(fā)現(xiàn)關(guān)于blur和mousedown,click的順序說明。根據(jù)猜測,blur需要mousedown執(zhí)行默認(rèn)事件來觸發(fā)。所以總結(jié)事件順序應(yīng)為:mousedown->(other)blur->mouseup->click

總結(jié)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。

相關(guān)文章

最新評論