Mousedown事件即使在冒泡阶段也会更改子元素的颜色

如何解决Mousedown事件即使在冒泡阶段也会更改子元素的颜色

我想对五个嵌套的div元素执行冒泡事件：当我单击div元素时，被单击的元素及其父元素应该更改颜色。

我在下面的代码中所做的基本上是为每个div元素设置“ mousedown”元素，这将在mousedown事件之后等待一段时间，其backgroundColor会更改：

const one = document.querySelector("#\\31");
const two = document.querySelector("#\\32");
const three = document.querySelector("#\\33");
const four = document.querySelector("#\\34");
const five = document.querySelector("#\\35");

five.addEventListener(
  "mousedown",function () {
    setTimeout(() => {
      changeBg(this);
    },1500);
  },false
);

four.addEventListener(
  "mousedown",1750);
  },false
);

three.addEventListener(
  "mousedown",function (event) {
    setTimeout(() => {
      changeBg(this);
    },2000);
  },false
);

two.addEventListener(
  "mousedown",2250);
  },false
);

one.addEventListener(
  "mousedown",2500);
  },false
);

function changeBg(t) {
  const element = document.querySelector("#\\3" + t.id);
  element.style.backgroundColor = "lightblue";
}

我遇到的但不了解的问题是，在更改单击的div和父div的颜色之前，它会突然更改子div（所有它们同时）的颜色。我错过了代码中的某些内容，还是整体上未实现？如果有人可以详细解释，我将非常高兴。

代码沙箱链接：https://codesandbox.io/s/busy-goldstine-ope9w?file=/src/index.js

谢谢。