js点击div中的元素

问题描述

我有一个 Slider，想停止它。现在我这样做：如果类名 === 'slider' 然后停止。

但我使用 e.target.classList。因此，如果我单击 Slider，则会得到类名“e-target-another-class”。但我希望我在名称为滑块的 div 中单击然后停止。我希望你明白我的

<div class="slider">
  <div class="e-target-new-class">
    <div class="e-target-anohter-class">
       slider
  </div>
</div>

解决方法

将事件侦听器附加到所需的 .slider 元素。
并且“不要”使用 Event.target（除非您真的知道自己在做什么）-改用 Event.currentTarget。

在您的情况下，currentTarget 将始终是所需的 .slider 包装元素

function stopSlider(ev) {

  const delegator = ev.currentTarget; // This is what you want!
  const target = ev.target;
  
  console.clear(); console.log(`DELEGATOR: ${[...delegator.classList]}
TARGET: ${[...target.classList]}`);
}

const ELS_slider = document.querySelectorAll(".slider");
ELS_slider.forEach(EL => EL.addEventListener("click",stopSlider));

[class^=slider] {outline: 1px solid #000; padding: 10px;}

<div class="slider">
  SLIDER
  <div class="slider-slides">
    ALL SLIDES
    <div class="slider-slide">
      SINGLE SLIDE
    </div>
  </div>
</div>

click javascript target