При щелчке элемента подниматься parentNode, пока не будет найден конкретный родитель - PullRequest
Новая
       52

При щелчке элемента подниматься parentNode, пока не будет найден конкретный родитель

0 голосов
/ 24 апреля 2018

Я хотел бы установить прослушиватель события щелчка в vanilla javascript на UL, затем при щелчке внутри него я хочу щелкнуть элемент, проверить, не является ли он LI, если нет - идиup parentNode, пока не будет достигнут 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>


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>

1 Ответ

0 голосов
/ 24 апреля 2018

Вы можете использовать Element.closest():

Метод Element.closest () возвращает ближайшего предка текущий элемент (или сам текущий элемент), который соответствует селекторы приведены в параметре. Если нет такого предка, это возвращает ноль.

Пример: 

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