Задать вопрос
@elarkov
javascript

Как лучше всего обрабатывать независимый клик на одинаковых блоках в разметке DOM?

Например у меня в разметке есть несколько элементов которые ведут себя один в один и у них одинаковые классы

<body>
   <div class="box"><button>Press</button></div>
   <div class="box"><button>Press</button></div>
</body>


я пытался вот так в js сделать
const box = document.querySelectorAll('box');
box.forEach((el) => {
   const btn = el.querySelector('button');
  btn.addEventListener('click', => {
       box.classList.add('active');
    })
});


Но с таким подходом при клике на кнопку по любому из блоков, active класс добавляется всем box блокам.
  • Вопрос задан
  • 36 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
Stalker_RED
@Stalker_RED 
document.addEventListener('click', function(evt) { // всего один EventListener
  const btn = evt.target.closest('.box button');
  if (btn) { // если клик не по кнопке, то в переменной будет null, и этот блок не выполнится.
    btn.closest('.box') // ближайший родительский .box
        .classList.toggle('active');
  }
});
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Asokr 
const box = document.querySelectorAll('box');
box.forEach((el) => {
   const btn = el.querySelector('button');
  btn.addEventListener('click', => {
       this.closest('.box').classList.add('active');
    })
});
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Developer (backend / fullstack)
Brightdata • Тель-Авив
от 5 500 до 6 500 $
Ещё вакансии
Заказы с Хабр Фриланса
Необходимо реализовать на Ассемблере моделирование команд
07 мая 2024, в 20:58
1000 руб./за проект
Код для color picker с градиентом
07 мая 2024, в 20:44
500 руб./за проект
Разработка iOS Приложения
07 мая 2024, в 20:21
900000 руб./за проект
Ещё заказы