Для чего нужен метод stopPropagation?

Метод `stopPropagation` нужен, чтобы остановить всплытие (и погружение) события — не дать ему распространяться дальше по дереву DOM к другим элементам.

Что делает

Вызванный на событии, он не даёт событию дойти до обработчиков на родительских (при всплытии) или дочерних (при погружении) элементах.

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

Когда применяют

• Вложенные интерактивные элементы: клик по кнопке внутри карточки не должен активировать клик по карточке.
• Модальные окна: клик внутри окна не должен закрывать его через обработчик на оверлее.

stopPropagation против stopImmediatePropagation

• stopPropagation — останавливает переход к другим элементам, но остальные обработчики на текущем элементе выполнятся.
• stopImmediatePropagation — плюс не даёт выполниться другим обработчикам того же события на этом элементе.

Осторожно

Избыточный stopPropagation ломает делегирование событий и глобальные обработчики (аналитика, закрытие по клику вне). Применяйте точечно; часто лучше проверять event.target.

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

stopPropagation останавливает распространение события по дереву (всплытие/погружение). Нужен для вложенных кликов и модалок. Не путать с preventDefault (отмена действия браузера). Злоупотребление ломает делегирование.