click觸發(fā)了input的blur事件

情景

使用input結(jié)合下拉選項(xiàng)自定義一個(gè)預(yù)選數(shù)據(jù)列表

  • input取消焦點(diǎn)（blur）時(shí)需要關(guān)閉下拉選項(xiàng)框；

  • 選擇下拉選項(xiàng)時(shí)需要關(guān)閉下拉選項(xiàng)框；


    0.jpg

故障

點(diǎn)擊下拉選項(xiàng)時(shí)，多數(shù)情況下，會(huì)先觸發(fā)input的blur事件，導(dǎo)致出現(xiàn)某些缺陷

解決方式

點(diǎn)擊事件改為mousedown 事件，并在事件中使用event.preventDefault() 就可以了

原因：
所有元素都有click事件，會(huì)產(chǎn)生冒泡。一個(gè)元素失去焦點(diǎn)，blur事件優(yōu)先于click事件。只要input綁定了blur，離開時(shí)瀏覽器會(huì)默認(rèn)執(zhí)行。
改為mousedown 之后，當(dāng)你點(diǎn)擊元素的時(shí)候，mousedown 優(yōu)先于blur執(zhí)行，所以只要在 mousedown 事件中阻止默認(rèn)事件發(fā)生就可以了！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容