> Как предотвратить всплытие события при клике на вложенные контейнеры в JavaScript (JavaScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: YADRO

Стек: JavaScript

> Пример ответа

Для предотвращения всплытия события (event bubbling) при клике на вложенные контейнеры в JavaScript используется метод stopPropagation() объекта события. Вызывайте его внутри обработчика клика на дочернем элементе, чтобы событие не передавалось родительским контейнерам.

Пример:

JAVASCRIPT
document.querySelector('.child').addEventListener('click', function(event) {
  event.stopPropagation();
  // Ваш код обработки клика на дочернем элементе
});

document.querySelector('.parent').addEventListener('click', function() {
  // Этот обработчик не сработает при клике на .child
});

Также можно использовать stopImmediatePropagation(), если нужно предотвратить всплытие и остановить выполнение других обработчиков на том же элементе. Альтернативный подход - проверять event.target в родительском обработчике, чтобы игнорировать клики на дочерних элементах, но это менее надёжно при сложной вложенности.