[英]When an element is clicked, go up the parentNode until a specific parent is found
I would like to set a click event listener in vanilla javascript on an UL , then on a click inside of that, I want to get the element clicked, check to see if it is an LI, if it is not - go up the parentNode until LI is reached, if it is - get it, if its not - stop at the UL. 我想在UL上的香草javascript中设置一个click事件监听器,然后在其中单击,我想让该元素被单击,检查它是否为LI,如果不是,请执行以下操作-向上运行parentNode直到达到LI,如果达到-如果没有,则获取-停止在UL。
Jsfiddle - https://jsfiddle.net/urbbsu0t/4/ Jsfiddle- https: //jsfiddle.net/urbbsu0t/4/
I tried many methods and read a few articles, but everything I find works when there are no nested elements, ie if I have a single element inside the LI. 我尝试了许多方法并阅读了几篇文章,但是当没有嵌套元素(即,如果我在LI内只有一个元素)时,我发现的所有内容都可以使用。 But how can I compare them if I have many children? 但是如果我有很多孩子,我该如何比较?
Here is an example of an LI element 这是一个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>
You can use Element.closest()
: 您可以使用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. Element.closest()方法返回与参数中给定的选择器匹配的当前元素(或当前元素本身)的最接近祖先。 If there isn't such an ancestor, it returns null. 如果没有这样的祖先,则返回null。
Example: 例:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.