Как наложить клик на все элементы внутри списка?

Question

Есть элемент li, который содержит в себе вложенные div элементы. Я наложил событие на li.

Как мне сделать, чтобы при клике на li и на вложенные div было событие?

<li data-list="3" class="section-about-contacts__item">
  <div class="section-about-contacts__title">Интерьер</div>
 </li>

Answer 1

Вешаете один слушатель события на родителя li и отслеживаете все клики на его children внутри него, потом проверяете какой класс у элемента, на который нажали и делаете нужную логику

let li = document.querySelectorAll('li')

li.forEach(item => {
    item.addEventListener('click', clickHandler)
})

function clickHandler(e) {
    
    if(e.target.classList.contains('class-div')) {
        console.log('нажали на div')
    }
    if(e.target.classList.contains('class-li')) {
        console.log('нажали на li')
    }
}

ul {
    border: 1px solid #000;
}

li {

    padding: 5px;
    background-color: #f50ccc;
    margin-bottom: 5px;
}

div {
    background-color: #ccc;
    padding: 10px;
    margin-bottom: 5px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <ul>
        <li class="class-li">li
            <div class="class-div">div</div>
            <div class="class-div">div</div>
        </li>
        <li class="class-li">li
            <div class="class-div">div</div>
            <div class="class-div">div</div>
        </li>
    </ul>
    <script src="scripts.js"></script>
</body>
</html>

Answer 2

// предположим все li находятся в блоке с классом list-box, записываем его в переменную
const $ul = document.querySelector('.list-box')

// добавляем слушатель события
$ul.addEventListener('click', onListClick)

function onListClick(e) {
  // записываем в переменную ближайший элемент с атрибутом data-list
  const $item = e.target.closest('[data-list]')

  // если такой элемент есть, выполняем код
  if($item) {
    alert(`номер: ${$item.dataset.list}`)
  }
}

Ссылки:
closest - https://developer.mozilla.org/ru/docs/Web/API/Element/closest

БЛОГ НА HUSL

Как наложить клик на все элементы внутри списка?

Ответы (2 шт):