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

我想在UL上设置一个用普通javascript编写的点击事件监听器，然后在其内部点击，我想点击元素，检查它是否是LI，如果不是-进入父节点直到到达LI，如果是-获取它，如果不是-停止在UL

Jsfiddle-

我尝试了许多方法并阅读了一些文章，但当没有嵌套元素时，我发现所有方法都有效，即如果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>

.services{
显示器：flex；
证明内容：之间的空间；
}
.service{flex 1 30%；最大宽度：30%；}

标题在这里
Lorem ipsum dolor sit amet，奉献精英。必要的，必须的

按钮在这里


标题在这里
Lorem ipsum dolor sit amet，奉献精英。真的吗

按钮在这里


标题在这里
Lorem ipsum dolor sit amet，奉献精英。我们必须遵守劳动法，除此之外

按钮在这里

您可以使用：

方法返回元素的最近祖先 当前元素（或当前元素本身），它与 参数中给出的选择器。如果没有这样一个祖先，它 返回null

示例：

const services=document.querySelector（'.services'）；
services.addEventListener（'click'，函数（e）{
const li=e.target.closest（'.service'）；
如果（li）li.style.color='red'；
});
.services{
显示器：flex；
证明内容：之间的空间；
}
.service{flex 1 30%；最大宽度：30%；}


标题在这里
Lorem ipsum dolor sit amet，奉献精英。必要的，必须的

按钮在这里


标题在这里
Lorem ipsum dolor sit amet，奉献精英。真的吗

按钮在这里


标题在这里
Lorem ipsum dolor sit amet，奉献精英。我们必须遵守劳动法，除此之外

按钮在这里

您可以使用：

方法返回元素的最近祖先
当前元素（或当前元素本身），它与
参数中给出的选择器。如果没有这样一个祖先，它
返回null

示例：


const services=document.querySelector（'.services'）；
services.addEventListener（'click'，函数（e）{
const li=e.target.closest（'.service'）；
如果（li）li.style.color='red'；
});
.services{
显示器：flex；
证明内容：之间的空间；
}
.service{flex 1 30%；最大宽度：30%；}


标题在这里
Lorem ipsum dolor sit amet，奉献精英。必要的，必须的

按钮在这里


标题在这里
Lorem ipsum dolor sit amet，奉献精英。真的吗

按钮在这里


标题在这里
Lorem ipsum dolor sit amet，奉献精英。我们必须遵守劳动法，除此之外

按钮在这里

当场，虽然机会渺茫，但如果OP需要支持IE，这在IE中不起作用。是否有办法增加对IE的支持，至少是对更高版本的支持？这与我想要的完全一样。例如，在Safari上使用polyfillSpot，只是，虽然可能性很小，但如果OP需要支持IE，这在IE中不起作用。是否有方法添加对IE的支持，至少是对更高版本的支持？这与我想要的OST在Safari上不起作用完全一样。例如，使用polyfill