Для чего используется stopPropagation

stopPropagation() предотвращает всплытие события в DOM. Когда событие происходит на элементе, оно поднимается вверх по дереву DOM, вызывая обработчики на родительских элементах. stopPropagation() останавливает это всплытие, но не влияет на другие обработчики на текущем элементе.

Пример:

document.querySelector('.child').addEventListener('click', (e) => {
  e.stopPropagation();
  console.log('Child clicked');
});

document.querySelector('.parent').addEventListener('click', () => {
  console.log('Parent clicked'); // Не сработает при клике на child
});

Важно: stopPropagation() не предотвращает действие по умолчанию (для этого есть preventDefault()). Также не стоит злоупотреблять этим методом, так как он может нарушить ожидаемое поведение событий в приложении.