js 点击 div 里面的元素

Question

我有一个滑块，想停止它。现在我这样做：如果类名 === '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>

Answer 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>

js 点击 div 里面的元素

js click element where inside in a div

javascript

click

target