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

Как отключить всплытие события в модальном окне?

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

Подробный ответ

Основной ответ

При клике внутри модального окна остановить всплытие события (event propagation) можно вызовом метода event.stopPropagation() в обработчике. Он прекращает дальнейшее распространение события вверх по дереву DOM, поэтому обработчики родителей, расположенных за пределами модального окна, не будут выполнены.

Ключевые моменты

• В браузере событие проходит три последовательные фазы: захват (capture), целевой элемент (target) и всплытие (bubble). На этапе всплытия оно перемещается по DOM от вложенного элемента к его родительским узлам.
• Обычно для модального окна на оверлей, то есть фон, устанавливают слушатель, который закрывает окно при клике за пределами содержимого. Чтобы нажатие внутри модального контента не запускало закрытие, на самом элементе модального окна необходимо остановить всплытие события.
• В React 18 и актуальных браузерах event.stopPropagation() корректно действует как для синтетических, так и для нативных событий.

Практический контекст

В распространённом UI-паттерне модальное окно находится внутри оверлея, на котором задан обработчик закрытия. Если не остановить всплытие, клик по содержимому модального окна поднимется до оверлея и приведёт к его закрытию. Вызов event.stopPropagation() в обработчике клика модального контента эффективно и просто устраняет это поведение.