Как остановить всплытие события?

Остановить всплытие события можно методом `event.stopPropagation()`, который не даёт событию подниматься к родительским элементам.

stopPropagation

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

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

stopImmediatePropagation

Останавливает всплытие и не даёт выполниться остальным обработчикам этого же события на текущем элементе:

el.addEventListener('click', (e) => {
  e.stopImmediatePropagation();
});
el.addEventListener('click', () => {
  console.log('этот обработчик уже не выполнится');
});

Не путать с preventDefault

• stopPropagation — останавливает распространение события.
• preventDefault — отменяет действие по умолчанию (переход по ссылке, отправку формы), но всплытие продолжается.

Их можно вызывать вместе, если нужно и то, и другое.

Осторожно

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

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

Всплытие останавливает event.stopPropagation(); stopImmediatePropagation() дополнительно отменяет другие обработчики на том же элементе. Это не то же, что preventDefault (отмена действия браузера). Злоупотребление ломает делегирование.