单击某个元素时，向上 parent 节点移动，直到找到特定的 parent

Question

我想在 UL 上设置香草 javascript 中的点击事件侦听器，然后在其中单击时，我想点击该元素，检查它是否是 LI，如果不是 - 沿父节点向上移动直到到达 LI，如果是 - 获取它，如果不是 - 在 UL 处停止。

Jsfiddle - https://jsfiddle.net/urbbsu0t/4/

我尝试了很多方法并阅读了几篇文章，但是当没有嵌套元素时我发现的一切都有效，即如果我在 LI 中有一个元素。但是，如果我有很多 children，我该如何比较它们呢？

这是 LI 元素的示例

<li class="service">
  <div class="service-body">

    <h1>Title goes here</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt dicta 
    laborum, excepturi tenetur vero cum!</p>

    <button>button goes here</button>
  </div>
</li>

const services = document.querySelector('.services');

services.addEventListener('click', function(e) {
 
})

.services {
  display: flex;
  justify-content: space-between;
}

.service {flex 1 30%; max-width: 30%;}

<ul class="services">
  <li class="service">
    <div class="service-body">
      <h1>Title goes here</h1>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus sequi ab quod.</p>
      <button>button goes here</button>
    </div>
  </li>
  
  <li class="service">
    <div class="service-body">
      <h1>Title goes here</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, officiis?</p>
      <button>button goes here</button>
     </div>
  </li>
  
  <li class="service">
    <div class="service-body">
      <h1>Title goes here</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt dicta laborum, excepturi tenetur vero cum!</p>
      <button>button goes here</button>
    </div>
  </li>
</ul>

Answer 1

您可以使用 Element.closest():

The Element.closest() method returns the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter. If there isn't such an ancestor, it returns null.

示例：

const services = document.querySelector('.services');

services.addEventListener('click', function(e) {
  const li = e.target.closest('.service');
  
  if(li) li.style.color = 'red';
});

.services {
  display: flex;
  justify-content: space-between;
}

.service {flex 1 30%; max-width: 30%;}

<ul class="services">
  <li class="service">
    <div class="service-body">
      <h1>Title goes here</h1>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus sequi ab quod.</p>
      <button>button goes here</button>
    </div>
  </li>

  <li class="service">
    <div class="service-body">
      <h1>Title goes here</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, officiis?</p>
      <button>button goes here</button>
    </div>
  </li>

  <li class="service">
    <div class="service-body">
      <h1>Title goes here</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt dicta laborum, excepturi tenetur vero cum!</p>
      <button>button goes here</button>
    </div>
  </li>
</ul>

单击某个元素时，向上 parent 节点移动，直到找到特定的 parent

When an element is clicked, go up the parentNode until a specific parent is found

javascript

html

css

dom-events

event-bubbling