Справочник API
event.stopPropagation() в jQuery
Содержание статьи
-
Категории: Events › Event Object
Предотвращает дальнейшее всплытие объекта события вверх по дереву DOM.
Синтаксис и описание:
Добавлено в jQuery 1.0event.stopPropagation()
Метод event.stopPropagation() останавливает всплытие события вверх по DOM-дереву, то есть родительские элементы больше не получат это событие. При этом остальные обработчики того же события, повешенные на текущем элементе, продолжат выполняться — для их отмены нужен event.stopImmediatePropagation().
Важная особенность для делегированных обработчиков (
.on( event, selector, handler )и устаревший .delegate()): к моменту, когда делегированный обработчик на родителе получит управление, обработчики, повешенные на элементах ниже в дереве, уже отработали — stopPropagation() в них останавливает всплытие выше, но не откатывает уже случившееся.Есть и обратная тонкость: если остановить всплытие на промежуточном элементе, делегированный обработчик, повешенный через
.on()на общем предке (например, наdocumentили на контейнере списка), вообще не сработает для этого клика — событие до него просто не дойдёт. Это частая причина, когда «пропадают» клики в системах на делегировании.
Возвращаемое значение: нет (undefined).
Примечание:
Не отменяет действие браузера по умолчанию (переход по ссылке, отправку формы) — для этого нужен отдельный вызов event.preventDefault(). Проверить, вызывался ли stopPropagation(), можно через event.isPropagationStopped().
Ещё момент:
Старый способ
return false;в обработчике тоже останавливает всплытие, но одновременно отменяет и действие по умолчанию — если нужно только одно из двух, используйте явный вызов event.stopPropagation() или event.preventDefault() по отдельности.В jQuery 3.x и 4.0:
Метод работает без изменений. Нативный аналог —
Event.stopPropagation(); устаревшее свойствоevent.cancelBubble = trueв новом коде использовать не стоит.
Примеры:
Клик по кнопке внутри карточки не должен «раскрывать» саму карточку:
$( ".card" ).on( "click", function () { console.log( "Карточка раскрыта" ); } ); $( ".card .btn-details" ).on( "click", function ( event ) { event.stopPropagation(); console.log( "Открыты детали, карточка не переключилась" ); } );Закрываем выпадающее меню по клику вне его, не закрывая при клике внутри:
$( "#dropdown" ).on( "click", function ( event ) { event.stopPropagation(); } ); $( document ).on( "click", function () { $( "#dropdown" ).removeClass( "open" ); } );
Подробнее — в статье «События в jQuery: .on(), .off() и делегирование».