Question

如何完全停止冒充<li>列表中的特定元素？在我的情况下，ul data-slide-id的第一个子元素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) }) }参数？

我的JS档案：

<p>Lorem...... </p>

编辑：我也在尝试：

<h3>Lorem.....</h3>

在这种情况下，当我点击列表ul时，我在控制台中获得了各种元素： <li class="slider__card slider__margin-t--1" data-slide-id="1"> </li>或<ul class="slider__container">  <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>    </ul>

我希望这个功能只挖到：

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) } }) }元素。

我的index.html：

CONVERT

PS。我也在尝试e.stopPropagation（）。

编辑解决方案：

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

CAST

Answer 1

不，你不想停止冒泡，因为你的代码依赖于冒泡。你的解决方案背后的想法是要走的路，但它并不是真正的防弹。您可以尝试获取父节点，直到父节点为ul。

使用while循环：

＆＃13;

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);
})

＆＃13;

ul {
  background-color: blue;
}

li {
  background-color: pink;
}

＆＃13;

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

＆＃13;

如何阻止在DOM的特定元素上冒泡？

1 个答案: