Если кнопка вложена в кликабельную карточку, сработают ли обработчики клика и у кнопки, и у карточки? Как разделить эти события?

Как работают события при вложенных элементах

Когда пользователь кликает по кнопке, которая находится внутри карточки, браузер создаёт событие клика и запускает его фазу погружения от корня документа до цели, затем фазу всплытия обратно. Обработчики, назначенные на кнопке и на карточке, сработают в порядке всплытия: сначала на кнопке, потом на карточке. Это стандартное поведение DOM, называемое всплытием событий.

Как разделить события

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

card.addEventListener('click', () => {
  console.log('Карточка кликнута');
});

button.addEventListener('click', (event) => {
  event.stopPropagation(); // останавливаем всплытие
  console.log('Кнопка кликнута');
});

Другой подход — проверять event.target в обработчике карточки. Если цель клика — сама кнопка, можно игнорировать событие или выполнить другую логику. Это полезно, когда нужно обрабатывать клики по разным дочерним элементам по-разному.

card.addEventListener('click', (event) => {
  if (event.target === button) {
    // клик по кнопке — не обрабатываем как клик по карточке
    return;
  }
  console.log('Карточка кликнута');
});

Практическое применение

Всплытие событий широко используется в делегировании событий: вместо назначения обработчика каждому элементу списка, можно повесить один обработчик на родителя и определять, какой элемент был целью. Однако при вложенных интерактивных элементах важно контролировать распространение, чтобы избежать неожиданных срабатываний.

Вывод: Используйте stopPropagation(), когда нужно полностью изолировать событие на вложенном элементе, или проверяйте event.target, если требуется гибкая логика обработки. Это стандартные практики для создания предсказуемого поведения интерфейсов.