Javascript 在子元素上的父触发器单击事件上鼠标向下移动

我正在使用具有滑动效果的滑块。我使用的是Wes Bos的Youtube教程中的示例。问题是，当我单击父事件（mousedown事件）时，它也会在mouseup事件之后触发子事件

我尝试添加计时器，它允许在mouseup事件完成几秒钟后单击子元素上的事件

HTML:

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";

  });

}

单击NotAllowed=false；
//--------教程-----------------//
常量滑块=document.getElementsByClassName（'items'）[0]；
让isDown=false；
让startY；
让我们在上面滚动；
让速度=0.5；
//鼠标按下将触发父事件（滑动），但子事件也将触发
//添加到需要执行的事件列表中
slider.addEventListener（'mousedown'，（e）=>{
isDown=真；
startY=e.pageY-slider.offsetTop；
scrollTop=slider.scrollTop；
});
slider.addEventListener（'mouseleave'，（）=>{
isDown=假；
单击不允许=错误；
});
slider.addEventListener（'mouseup'，（）=>{
isDown=假；
//不是教程的一部分
//我试着在鼠标启动几毫秒后设置计时器
//我正在将clickNotAllowed设置为true，以便用户能够单击
//在此计时器完成之前，单击子项上的事件将尝试自行执行
setTimeout（函数（）{
单击不允许=错误；
}, 200);
});
slider.addEventListener（'mousemove'，（e）=>{
如果（！isDown）返回；
e、 预防默认值（）；
常数x=e.pageY-slider.offsetTop；
恒速行走=（x-星光）*速度；
slider.scrollTop=scrollTop-漫游；
//---不是教程的一部分--//
单击不允许=真；
});
//==================不属于本教程的一部分================//
const item=document.getElementsByClassName（“item”）；
for（设i=0；i

---

预期的结果是，当我单击父元素（slider-items类）并触发mousedown事件时，在执行父元素的mouseup后不应执行子事件。

这种行为通常通过添加

event.stopPropagation（）

来解决，单击EventListener请检查我制作的示例。我添加了

event.stopPropagation（）

但子事件被激发。签出小提琴，您可以添加

指针事件：无至
.swiper\u项目
。这个问题是因为你自动拖动图像。问题是如果我添加这个代码，点击事件将从项目中完全删除。但我需要它，因为我想打开图像时，我点击它。基本上，这是图像库的滑块。这类行为通常通过添加
event.stopPropagation（）
来解决。单击EventListener请检查我制作的示例。我添加了
event.stopPropagation（）
但子事件被激发。签出小提琴，您可以添加
指针事件：无至
.swiper\u项目
。这个问题是因为你自动拖动图像。问题是如果我添加这个代码，点击事件将从项目中完全删除。但我需要它，因为我想打开图像时，我点击它。基本上，这是图像库的滑块。
.items {
  height: 300px;
  overflow: scroll;
}

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


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";

  });

}