javascript - 如何停止 DOM 特定元素上的冒泡？

Question

如何停止在列表的特定元素上冒泡 ul ？就我而言，它是 <li> ul 的第一个子元素其中有data-slide-id我想退出争论吗？

我的JS文件:

  onSlideClick() {
    document.getElementsByClassName('slider__container')[0].addEventListener('click', (e) => {
      e.preventDefault()
      console.log(e.target)
    })
  }

编辑:我也在尝试:

  onSlideClick() {
    this.container[0].addEventListener('click', (e) => {
      e.stopPropagation()
      console.log(e.target)
    })
  }

在这种情况下，当我单击列表 ul 时，我会在控制台中看到各种元素，例如: <p>Lorem...... </p>或<h3>Lorem.....</h3>

我希望这个函数只挖掘:

<li class="slider__card slider__margin-t--1" data-slide-id="1"> </li>元素。

我的index.html:

    <ul class="slider__container">
      <!-- 1 slide -->
      <li class="slider__card slider__margin-t--1" data-slide-id="1">
        <div class="slider__card-pic">
          <img >
          <img >
        </div>
        <div class="slider__card-text">
          <h3>Excepteur sint occaecat</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minus debitis laboriosam ea, magni nulla libero.</p>
        </div>
      </li>
      <!-- 2 slide -->
      <!-- 3 slide -->
      <!-- 4 slide -->
    </ul>

PS。我也在尝试 e.stopPropagation() 。

编辑解决方案:

我找到了某种黑客解决方案，但并不理想...如果有人有更好的想法，请告诉我:

  onSlideClick() {
    console.log(this.container)
    this.container.addEventListener('click', (e) => {
      if (e.target.parentNode.parentNode && e.target.parentNode.parentNode.nodeName == 'LI') {
        console.log(e.target.parentNode.parentNode)
      }  
    }) 
  }

Answer 1

不，您不想停止冒泡，因为您的代码依赖于冒泡。您的解决方案背后的想法是可行的方法，但它并不是真正的万无一失。您可以尝试获取父节点，直到父节点是您的 ul。

使用 while 循环:

var container = document.querySelector('.slider__container');
container.addEventListener('click', (e) => {
  var target = e.target;
  if (target === container)
    return // no need to check further if click happened on the ul
  while (target.parentNode && target.parentNode !== container) {
    target = target.parentNode 
  }
  console.log(target.dataset.slideId);
})

ul {
  background-color: blue;
}

li {
  background-color: pink;
}

<ul class="slider__container">
  <!-- 1 slide -->
  <li class="slider__card slider__margin-t--1" data-slide-id="1">
    <div class="slider__card-pic">
      <img>
      <img>
    </div>
    <div class="slider__card-text">
      <h3>Excepteur sint occaecat</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minus debitis laboriosam ea, magni nulla libero.</p>
    </div>
  </li>
  <!-- 2 slide -->
  <!-- 3 slide -->
  <!-- 4 slide -->
</ul>