Как остановить Bubbling после click?

Всплытие (bubbling) после клика останавливают методом `event.stopPropagation()` в обработчике — событие не пойдёт к родительским элементам.

stopPropagation

element.addEventListener('click', (e) => {
  e.stopPropagation(); // всплытие остановлено
  // родители не получат это событие
});

Пример

child.addEventListener('click', (e) => {
  e.stopPropagation();
  console.log('child');
});
parent.addEventListener('click', () => {
  console.log('parent'); // НЕ выполнится при клике по child
});

stopImmediatePropagation

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

element.addEventListener('click', (e) => {
  e.stopImmediatePropagation();
});
element.addEventListener('click', () => {
  // НЕ выполнится
});

Не путать с preventDefault

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

Осторожно

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

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

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