单击某个元素时，请转到parentNode，直到找到特定的父元素

Question

我想在UL上的vanilla javascript中设置一个click事件监听器，然后点击其中的内部，我想点击该元素，检查它是否是LI，如果不是 - 去到达LI之前的父节点，如果是 - 如果不是，则获取它 - 停在UL处。

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

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

以下是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>

＆＃13;

＆＃13;

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

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用Element.closest()：

  

Element.closest（）方法返回最接近的祖先   当前元素（或当前元素本身）匹配的   参数中给出的选择器。如果没有这样的祖先，那就是   返回null。

示例：

＆＃13;

＆＃13;

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

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;