觸發(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)很簡單， 我們看一下 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)沒有按鈕DOM存在了，所以 click 事件失效了

看到很多文章中提到類似的問題，單一的解釋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是什么？
通過結(jié)果表現(xiàn)來看，當(dāng) blur 觸發(fā)后，實(shí)際點(diǎn)擊的位置并非 ‘按鈕’ 而是body。從而論證 當(dāng)點(diǎn)擊的時(shí)候 按鈕DOM的位置依然發(fā)生變化

3、解決方案：

• 將 blur 回調(diào)函數(shù)延遲觸發(fā) 包一層setTimeout
• 將按鈕的 click 事件替換成 onMouseDown