В чём разница между event.preventDefault и event.stopPropagation?

Краткий ответ

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

Полный ответ

Что делает preventDefault

Отменяет стандартное поведение элемента:

• Ссылка не переходит по href.
• Форма не отправляется.
• Контекстное меню не открывается и т. п.

Событие при этом продолжает распространяться, то есть обработчики на родителях всё ещё сработают.

Мини‑пример:

// Ссылка не перейдёт по адресу, родительский обработчик выполнится
parent.addEventListener('click', () => console.log('parent'));
link.addEventListener('click', (e) => {
  e.preventDefault();
  console.log('link');
});

Что делает stopPropagation

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

Мини‑пример:

// Клик по кнопке не достигает родителя, но действие кнопки сохраняется
card.addEventListener('click', () => console.log('card'));
button.addEventListener('click', (e) => {
  e.stopPropagation();
  console.log('button');
});

Частые заблуждения

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

Когда вызывать оба

Если клик по вложенной ссылке внутри карточки не должен:

• переходить по href (отменяем действие),
• «запускать» обработчик клика карточки (останавливаем всплытие),

то вызовите оба:

link.addEventListener('click', (e) => {
  e.preventDefault();
  e.stopPropagation();
});

В React

В синтетических событиях React методы работают аналогично DOM:

• e.preventDefault() — отменяет действие.
• e.stopPropagation() — останавливает распространение. Учтите, что обработчики onClickCapture срабатывают на фазе перехвата раньше обычных onClick.