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

Метод stopPropagation()

stopPropagation() — это метод объекта события, который останавливает распространение события вверх по DOM дереву. Это критично для управления делегированием событий и предотвращения конфликтов.

Как работает распространение событий (Event Propagation)

Когда в браузере происходит событие (клик, ввод текста и т.д.), оно проходит три фазы:

1. Capturing phase — событие идёт вниз от корня document к целевому элементу
2. Target phase — событие достигает целевого элемента
3. Bubbling phase — событие всплывает вверх от целевого элемента к document

document
  ↓ (capturing)
    html
      ↓ (capturing)
        body
          ↓ (capturing)
            div#parent
              ↓ (capturing)
                button (TARGET) ← клик здесь
              ↑ (bubbling)
            div#parent
          ↑ (bubbling)
        body
      ↑ (bubbling)
    html
↑ (bubbling)
document

Пример проблемы без stopPropagation()

<div id="parent">
  <button id="child">Нажми</button>
</div>

<script>
  // Обработчик на родителе
  document.getElementById('parent').addEventListener('click', () => {
    console.log('Родитель кликнут!');
  });

  // Обработчик на кнопке
  document.getElementById('child').addEventListener('click', () => {
    console.log('Кнопка кликнута!');
  });
</script>

Результат при клике на кнопку:

Кнопка кликнута!
Родитель кликнут!

Почему? Событие всплывает (bubbles) вверх! Сначала обработчик кнопки, потом обработчик родителя.

Использование stopPropagation()

<div id="parent">
  <button id="child">Нажми</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', () => {
    console.log('Родитель кликнут!');
  });

  // ОСТАНАВЛИВАЕМ распространение
  document.getElementById('child').addEventListener('click', (event) => {
    event.stopPropagation();
    console.log('Кнопка кликнута!');
  });
</script>

Результат при клике на кнопку:

Кнопка кликнута!

Родитель НЕ получит событие, потому что мы остановили всплытие!

Практические примеры

1. Модальные окна (dropdown, popup)

<div class="dropdown">
  <button class="dropdown-trigger">Меню</button>
  <div class="dropdown-menu">
    <a href="#">Пункт 1</a>
    <a href="#">Пункт 2</a>
  </div>
</div>

<script>
  // Закрывать меню при клике вне его
  document.addEventListener('click', () => {
    document.querySelector('.dropdown-menu').classList.remove('open');
  });

  // НО не закрывать при клике внутри меню
  document.querySelector('.dropdown-menu').addEventListener('click', (event) => {
    event.stopPropagation(); // Не даём событию всплыть!
  });

  // И открывать при клике на триггер
  document.querySelector('.dropdown-trigger').addEventListener('click', (event) => {
    event.stopPropagation(); // Не даём закрыться!
    document.querySelector('.dropdown-menu').classList.add('open');
  });
</script>

2. Делегирование событий в списке

<ul id="list">
  <li>
    <span>Элемент 1</span>
    <button class="delete">×</button>
  </li>
  <li>
    <span>Элемент 2</span>
    <button class="delete">×</button>
  </li>
</ul>

<script>
  // Делегирование: один обработчик на родителе
  document.getElementById('list').addEventListener('click', (event) => {
    if (event.target.classList.contains('delete')) {
      event.stopPropagation(); // Не переходим по li
      event.target.parentElement.remove();
      console.log('Элемент удалён');
    }
  });

  // Обработчик на li (выбор элемента)
  document.getElementById('list').addEventListener('click', (event) => {
    const li = event.target.closest('li');
    if (li) {
      console.log('Выбран:', li.textContent);
    }
  });
</script>

Без stopPropagation() на кнопке удаления, отработал бы и delete и select!

3. React компонент с stopPropagation

import React from 'react';

function Card() {
  const handleCardClick = () => {
    console.log('Карточка кликнута');
    // Переход на деталь
  };

  const handleDeleteClick = (e) => {
    e.stopPropagation(); // Не даём родителю обработать!
    console.log('Удаляем карточку');
    // API запрос на удаление
  };

  const handleLikeClick = (e) => {
    e.stopPropagation();
    console.log('Лайк!');
  };

  return (
    <div className="card" onClick={handleCardClick}>
      <h3>Заголовок</h3>
      <p>Описание</p>
      
      <button onClick={handleDeleteClick}>Удалить</button>
      <button onClick={handleLikeClick}>Лайк ❤</button>
    </div>
  );
}

stopPropagation vs preventDefault

const button = document.querySelector('button[type="submit"]');

button.addEventListener('click', (event) => {
  // stopPropagation — останавливает всплытие
  // Не переходит на родителя
  event.stopPropagation();
  
  // preventDefault — отменяет поведение браузера
  // Форма НЕ отправится
  event.preventDefault();
});

Иерархия событий: полный пример

<div id="grandparent">
  <div id="parent">
    <button id="child">Нажми</button>
  </div>
</div>

<script>
  const grandparent = document.getElementById('grandparent');
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');

  // CAPTURING фаза
  grandparent.addEventListener('click', () => {
    console.log('Grandparent capturing');
  }, true); // true = capturing phase

  parent.addEventListener('click', () => {
    console.log('Parent capturing');
  }, true);

  child.addEventListener('click', () => {
    console.log('Child capturing');
  }, true);

  // BUBBLING фаза (default)
  child.addEventListener('click', () => {
    console.log('Child bubbling');
  });

  parent.addEventListener('click', () => {
    console.log('Parent bubbling');
  });

  grandparent.addEventListener('click', () => {
    console.log('Grandparent bubbling');
  });
</script>

Порядок вывода:

Grandparent capturing
Parent capturing
Child capturing
Child bubbling
Parent bubbling
Grandparent bubbling

Когда НЕ использовать stopPropagation()

❌ Антипаттерн — использовать для скрытия ошибок в архитектуре

// Плохо: stopPropagation как заплатка
element.addEventListener('click', (e) => {
  e.stopPropagation();
  // Это закрывает проблемы в коде
});

// Хорошо: правильная архитектура
// Используй делегирование и правильную иерархию обработчиков

Лучшие практики

✅ Используй для dropdown, modal, tooltip — нужна изоляция ✅ Используй при делегировании событий — разные действия на разных элементах ✅ React: используй e.stopPropagation() в обработчиках ✅ Альтернатива: правильная архитектура событий (не требует stopPropagation)

Современный подход в React

// С React 17+ события отлично работают с stopPropagation
function List() {
  return (
    <ul onClick={(e) => {
      if (e.target.className === 'delete-btn') {
        e.stopPropagation();
        // Удаляем
      } else {
        // Выбираем элемент
      }
    }}>
      {/* items */}
    </ul>
  );
}

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