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

您需要改变计时器的开始时间。并且对于具有第二计时器的闪光效果将是好的。

＆＃13;

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++));
}

＆＃13;

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

＆＃13;

如何在捕获/冒泡阶段之间进行延迟

1 个答案: