Задать вопрос
@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 блокам.
  • Вопрос задан
  • 37 просмотров
Комментировать
Подписаться 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 FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
Senior Frontend (JavaScript) разработчик
Vital Partners
от 350 000 до 420 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Исправить ошибки NumPy, Scikit-learn
07 февр. 2025, в 03:38
500 руб./за проект
MQL5 Разработчик
07 февр. 2025, в 02:40
30000 руб./за проект
Настройка бандлера Infinity Script для Pump fun
07 февр. 2025, в 02:20
35000 руб./за проект
Ещё заказы