Mousedown на событии щелчка родительского триггера на дочерних элементах

Question

Я работаю над слайдером с эффектом смахивания.Я использую пример из учебника Youtube Уэса Боса.Проблема в том, что когда я щелкаю по родительскому событию (событие mousedown), оно также запускает дочернее событие после события mouseup.

Я пытался добавить таймер, который разрешит событие щелчка по дочерним элементам в течение нескольких секунд.после завершения события mouseup

HTML:

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

CSS:

.items {
  height: 300px;
  overflow: scroll;
}

.items .item {
  width: 200px;
  height: 80px;
  background: green;
  border-bottom: 1px solid red;
}

Javascript:

let clickNotAllowed = false;

// ------------------- Tutorial ------------------- //
const slider = document.getElementsByClassName('items')[0];
let isDown = false;
let startY;
let scrollTop;
let speed = 0.5;


// Mouse down will trigger the parent event (swipe), but also the child event will
// be added to the list of events which need to be executed
slider.addEventListener('mousedown', (e) => {
  isDown = true;
  startY = e.pageY - slider.offsetTop;
  scrollTop = slider.scrollTop;
});

slider.addEventListener('mouseleave', () => {
  isDown = false;
  clickNotAllowed = false;
});

slider.addEventListener('mouseup', () => {
  isDown = false;

  // Not part of the tutorial
  // I tried to set the timer so a few ms after the mouse is up
  // I'm setting the clickNotAllowed to true so the user will be able to click
  // Before this timer is finished, click event on the child will try to execute itself
  setTimeout(function() {
    clickNotAllowed = false;
  }, 200);

});

slider.addEventListener('mousemove', (e) => {

  if(!isDown) return;
  e.preventDefault();
  const x = e.pageY - slider.offsetTop;
  const walk = (x - startY) * speed;
  slider.scrollTop = scrollTop - walk;

  // --- Not part of tutorial --- //
  clickNotAllowed = true;

});

// ============= NOT PART OF THE TUTORIAL ============= //
const item = document.getElementsByClassName("item");

for(let i = 0; i < item.length; i++) {

    item[i].addEventListener("click", function(e) {

    if(clickNotAllowed) return;

    e.target.style.background = "blue";

  });

}

Ожидаемый результат - когда я нажимаю на родителя (slider - items items) и событие mousedown вызывается, дочернее событие не должно выполняться после выполнения mouseup для родительского элемента.