Какие плюсы и минусы использования stopPropagation?

Плюсы `stopPropagation`: предотвращает нежелательное срабатывание родительских обработчиков (вложенные клики, модалки). Минусы: ломает делегирование и глобальные обработчики, скрытые баги.

Что делает

Останавливает всплытие события — родители его не получают:

child.addEventListener('click', (e) => {
  e.stopPropagation(); // родители не узнают о клике
});

Плюсы

• Предотвращает конфликты — клик по вложенному элементу не активирует родителя (кнопка внутри карточки).
• Модалки — клик внутри окна не закрывает его через обработчик на оверлее.
• Изоляция — компонент контролирует свои события.

Минусы

• Ломает делегирование — глобальный/родительский обработчик (делегирование, аналитика) не сработает, если событие остановлено ниже.
• Скрытые баги — трудно отследить, почему обработчик не срабатывает (событие «съедено» где-то ниже).
• Ломает глобальные механизмы — закрытие меню по клику вне, отслеживание кликов, сторонние библиотеки.
• Хрупкость — при добавлении новой логики на родителя она молча не работает.

Как избежать проблем

• Использовать точечно, только когда действительно нужно.
• Часто лучше проверять `event.target` в родителе, чем останавливать распространение:

parent.addEventListener('click', (e) => {
  if (e.target.closest('.button')) return; // игнорировать без stopPropagation
});

Коротко для собеседования

Плюсы stopPropagation: предотвращает срабатывание родительских обработчиков (вложенные клики, модалки — клик внутри не закрывает по оверлею). Минусы: ломает делегирование, глобальные обработчики (закрытие по клику вне, аналитику), создаёт скрытые баги (событие «съедено» ниже). Применять точечно; часто лучше проверять event.target, чем останавливать распространение.