javascript - When an element is clicked, go up the parentNode until a specific parent is found - Stack Overflow

admin管理员组

文章数量:1391947

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.

Jsfiddle - /

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. But how can I pare them if I have many children?

Here is an example of an LI element

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

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.

Jsfiddle - https://jsfiddle/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. But how can I pare them if I have many children?

Here is an example of an LI element

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

• javascript
• html
• css
• dom-events
• event-bubbling

Share Improve this question Follow edited Apr 24, 2018 at 14:52 Nope 22.3k88 gold badges4949 silver badges7373 bronze badges asked Apr 24, 2018 at 14:50 wdGelwixwdGelwix 18944 silver badges1717 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

You can use 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.

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>

本文标签：