Як зупинити спливання (bubbling) події?

Повне пояснення

Що це і навіщо

• stopPropagation() – метод Event, який припиняє подальший bubbling (спливання) події.
• Потрібно, коли дочірній елемент обробляє подію і не хоче, щоб її «поширювали» на батьківські елементи.

Ключові принципи

• bubbling – процес, коли після виконання обробника на елементі подія переходить до його батьків.
• stopPropagation() викликається в момент, коли подія ще не «поширилася».

Як це працює

1. Подія створюється і ініціалізується.
2. Відбувається фазування: capturing → target → bubbling.
3. Якщо в фазі bubbling викликати stopPropagation(), подія не переходить далі.

Практика і реалізація (JS/TS)

const btn = document.getElementById('btn')!;
btn.addEventListener('click', (e) => {
  e.stopPropagation();
  console.log('Button clicked, bubbling stopped');
});

Тестування (Jest + jsdom)

import { fireEvent } from '@testing-library/dom';
const parent = document.createElement('div');
const child = document.createElement('button');
parent.appendChild(child);
let parentCalled = false;
parent.addEventListener('click', () => { parentCalled = true; });
child.addEventListener('click', (e) => e.stopPropagation());
fireEvent.click(child);
expect(parentCalled).toBe(false);

Особливості в контексті React

• У React події – SyntheticEvent. Використовуємо e.stopPropagation() так само.
• Якщо потрібно повністю скасувати подію, також можна викликати e.preventDefault().

Оптимізація та edge cases

• stopPropagation() не скасовує default‑поведінку браузера.
• Якщо потрібен повний контроль, комбінуємо з preventDefault().
• У випадку декількох обробників на одному елементі, stopPropagation() вплине лише на подальші обробники.

Часті помилки

1. Викликати stopPropagation() після preventDefault() – не вплине на bubbling.
2. Забувати, що stopPropagation() працює лише в фазі bubbling (не в capturing).
3. Не використовувати stopPropagation() у глобальних обробниках, коли потрібна реакція на подію в інших частинах DOM.

Cheatsheet

• e.stopPropagation() – зупинити bubbling.
• e.preventDefault() – скасувати default‑поведінку.
• У React: event.stopPropagation() у функції обробника.