如何在捕獲/冒泡階段之間延遲

-1

我正在學習嵌套元素的事件階段，因此我創建了一個小型項目。 JS從第43行開始。如何在捕獲/冒泡階段之間延遲

所以這裏是簡單的嵌套divs。

<div id="zzz" class="thir"> 
    0 
    <div id="xxx" class="thir"> 
    0 
    <div id="sss" class="thir"> 
     0 
    </div> 
    </div> 
</div>

在這裏，我們與他們做什麼。

const ar2 = [zzz, xxx, sss]; 
ar2.map(e => { 
    e.addEventListener('click', nestedClick, phase); 
}) 

function nestedClick(e) { 
    // e.stopPropagation(); 
    const meow = this; 
    const prevColor = this.style.backgroundColor; 
    this.style.backgroundColor = '#757575'; 
    window.setTimeout(() => { meow.style.backgroundColor = prevColor}, 500); 
}

爲了直觀地展示瞭如何捕獲/冒泡的作品，我想改變每一步驟的背景顏色和設置超時，等到它完成，並觸發點擊旁邊用同樣的策略。

但是在這裏我看到，當我點擊任何元素事件仍然通過，改變顏色和強制所有.setTimeout（）像在同一時間。我該如何修復它？

側面的問題：爲什麼e.stopPropagation（）的工作原理是捕獲還是冒泡階段？

感謝您的關注！

來源

2017-02-12 ugncry

它打算這樣做，事件的傳播推移第一捕捉（去，直到我點擊body標籤）和冒泡（所有再升，直到獲得點擊的第一個元素），所以如果你打電話在任何階段'stopPropagation'就是這樣。它會停止事件的傳播。 https://javascript.info/tutorial/bubbling-and-capturing – r1verside

您需要改變定時器的開始時間。而具有第二個計時器的閃光效果會很好。

let counter = 1; 
 
const ar2 = [...document.getElementsByClassName('thir')]; 
 
ar2.map(e => { 
 
    e.addEventListener('click', nestedClick); 
 
    e.addEventListener('mouseup', function() { 
 
    counter = 1; 
 
    }); 
 
}); 
 

 
function nestedClick(e) { 
 
    const prevColor = this.style.backgroundColor; 
 
    debugger; 
 
    setTimeout(() => { 
 
    this.style.backgroundColor = '#757575'; 
 
    setTimeout(() => { 
 
     this.style.backgroundColor = prevColor; 
 
    }, 50 * (counter++)); 
 
    }, 500 * (counter++)); 
 
}

<div id="zzz" class="thir"> 
 
    CLICK ME 
 
    <div id="xxx" class="thir"> 
 
    CLICK ME 
 
    <div id="sss" class="thir"> 
 
     CLICK ME 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-02-12 13:14:58

如何在捕獲/冒泡階段之間延遲

回答

相關問題