キャプチャ/バブリングフェーズの間に遅延を入れる方法

Question

小さなプロジェクトを作成するために、入れ子要素のイベントフェーズを学習しています。 Codepen JSは43行目から始まります。

ここでは単純なネストされたdivです。

<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（）がキャプチャフェーズかバブリングフェーズかにかかわらず動作するのはなぜですか？

ありがとうございました！

Answer 1

タイマーの開始時間をシフトする必要があります。そして、2番目のタイマーを持つ点滅効果のために良いでしょう。そうすることを意図しています

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>