Как остановить всплытие события (event propagation) при клике внутри модального окна?

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

Как остановить:
В обработчике события вызовите event.stopPropagation().

Пример с модальным окном:
Допустим, у вас есть кнопка внутри модалки, и вы не хотите, чтобы клик по ней вызывал закрытие модалки (которое реализовано через outside click).

const Modal = ({ onClose }) => {
  const handleInnerClick = (event) => {
    event.stopPropagation(); // Останавливаем всплытие
    // Ваша логика обработки клика внутри модалки
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={handleInnerClick}>
        {/* Содержимое модалки */}
        <button>Кнопка внутри модалки</button>
      </div>
    </div>
  );
};

Важные моменты:

• stopPropagation() останавливает всплытие только для данного конкретного события.

• Альтернатива — проверять event.target в обработчике родителя, но это менее надежно.

• Не злоупотребляйте stopPropagation(), так как это может нарушить ожидаемое поведение других компонентов.