js点击div里面的元素答案

【问题标题】：js click element where inside in a divjs点击div里面的元素
【发布时间】：2021-01-24 11:35:44
【问题描述】：

我有一个 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>

【问题讨论】：

你错过了</div> - 错字

标签： javascript click target

【解决方案1】：

将事件侦听器附加到所需的.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>

【讨论】：