觸發(fā) input 的 blur 回調(diào)函數(shù)并動(dòng)態(tài)添加DOM元素晃听，可能會(huì)導(dǎo)致 button 的 click 函數(shù)不觸發(fā)。
ezgif-3-fda2e047c9.gif
操作步驟：
- 1天揖、input 聚焦
- 2景埃、點(diǎn)擊按鈕
代碼展示
<div id="targetDiv"></div>
<input type="text" id="myInput">
<button id="myButton">按鈕</button>
DOM結(jié)構(gòu)很簡(jiǎn)單， 我們看一下 js 代碼
var input = document.getElementById("myInput");
var targetDiv = document.getElementById("targetDiv");
var button = document.getElementById("myButton");
// 綁定blur事件處理函數(shù)
input.addEventListener("blur", function() {
// 創(chuàng)建新的復(fù)雜DOM結(jié)構(gòu)
var container = document.createElement("div");
container.classList.add("container");
var wrapper = document.createElement("div");
wrapper.classList.add("wrapper");
var section = document.createElement("section");
section.classList.add("section");
var header = document.createElement("h2");
header.textContent = "New Content";
var paragraph = document.createElement("p");
paragraph.textContent = input.value;
section.appendChild(header);
section.appendChild(paragraph);
wrapper.appendChild(section);
container.appendChild(wrapper);
// 將新的復(fù)雜DOM結(jié)構(gòu)追加到目標(biāo)div中
targetDiv.appendChild(container);
});
// 添加點(diǎn)擊事件處理函數(shù)
button.addEventListener("click", function() {
console.log("Button clicked!");
});
1粱哼、結(jié)論分析：blur 事件優(yōu)先級(jí)高于 click 函數(shù)觸發(fā)季二，當(dāng) blur 回調(diào)函數(shù)內(nèi)做了DOM的更新，引起了重繪揭措，從而導(dǎo)致 ‘按鈕’ 的位置發(fā)生改變胯舷，鼠標(biāo)點(diǎn)上去的時(shí)候 點(diǎn)的那個(gè)位置已經(jīng)沒(méi)有按鈕DOM存在了，所以 click 事件失效了
看到很多文章中提到類似的問(wèn)題绊含，單一的解釋js是單線程桑嘶， blur事件觸發(fā)導(dǎo)致click事件未觸發(fā)。這類的結(jié)論描述可能會(huì)給人產(chǎn)生誤導(dǎo)躬充。所以這里有必要給大家演示一下逃顶，并非js事件順序執(zhí)行導(dǎo)致的該現(xiàn)象。當(dāng)我在代碼中把 targetDiv 這個(gè)DOM節(jié)點(diǎn)放到Button下邊充甚，那一切的表現(xiàn)都是正常的 blur可以觸發(fā)以政， 按鈕的click事件也可以觸發(fā)。從而證明了 ‘js是單線程伴找， blur事件觸發(fā)導(dǎo)致click事件未觸發(fā)’ 該觀點(diǎn)的錯(cuò)誤性
2盈蛮、論證：論證該結(jié)論的正確性
ezgif-5-1f64438be1.gif
在代碼中添加已click的監(jiān)聽事件， 看一下當(dāng)我們點(diǎn)擊按鈕的時(shí)候 實(shí)際點(diǎn)擊的target是什么技矮？
通過(guò)結(jié)果表現(xiàn)來(lái)看抖誉，當(dāng) blur 觸發(fā)后殊轴，實(shí)際點(diǎn)擊的位置并非 ‘按鈕’ 而是body。從而論證 當(dāng)點(diǎn)擊的時(shí)候 按鈕DOM的位置依然發(fā)生變化
3寸五、解決方案：
- 將 blur 回調(diào)函數(shù)延遲觸發(fā) 包一層setTimeout
- 將按鈕的 click 事件替換成 onMouseDown
