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

Question

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

YeaHub · Accepted Answer

Всплытие событий:По умолчанию события в DOM всплывают от целевого элемента вверх по дереву до корня документа. Это может вызывать нежелательное срабатывание обработчиков на родительских элементах.Как остановить:В обработчике события вызовите event.stopPropagation().Пример с модальным окном:Допустим, у вас есть кнопка внутри модалки, и вы не хотите, чтобы клик по ней вызывал закрытие модалки (которое реализовано через outside click).const Modal = ({ onClose }) => { const handleInnerClick = (event) => { event.stopPropagation(); // Останавливаем всплытие // Ваша логика обработки клика внутри модалки }; return (

{/* Содержимое модалки */}

); };Важные моменты:stopPropagation() останавливает всплытие только для данного конкретного события.Альтернатива — проверять event.target в обработчике родителя, но это менее надежно.Не злоупотребляйте stopPropagation(), так как это может нарушить ожидаемое поведение других компонентов.