JavaScript метод Event.stopImmediatePropagation()

Определение и применение

JavaScript метод stopImmediatePropagation() объекта Event прекращает дальнейшую передачу текущего события (предотвращает всплытие по дереву DOM) и останавливает цепочку вызова событий для текущего элемента.

Остановка действует на дальнейшее распространение как в фазе перехвата, так и при всплытии. Она не отменяет действие по умолчанию; для этого используется preventDefault().

Поддержка браузерами

Спецификация: dom.spec.whatwg

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.Event.stopImmediatePropagation

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
stopImmediatePropagation	✓5	✓12	✓10	✓≤12.1	✓5	✓18	✓10	✓≤12.1	✓5	✓1.0	✓4.4	✓5

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

JavaScript синтаксис

event.stopImmediatePropagation();

Спецификация

DOM Standard.

Пример использования

Остановка остальных обработчиков элемента

Нажмите ▶, затем кнопку в результате: сработают два обработчика кнопки и обработчик родителя. Отметьте флажок и нажмите снова — останется только первый обработчик кнопки.

index.html

HTML

<label><input type="checkbox" /> Остановить остальные обработчики</label>
<div id="parent"><button id="target">Нажмите на кнопку</button></div>
<pre id="output"></pre>

main.js

JavaScript

const target = document.querySelector('#target')
const output = document.querySelector('#output')
const log = (message) => {
    output.textContent += message + '\n'
}
target.addEventListener('click', (event) => {
    output.textContent = ''
    log('Первый обработчик кнопки')
    if (document.querySelector('input').checked) {
        event.stopImmediatePropagation()
    }
})
target.addEventListener('click', () => log('Второй обработчик кнопки'))
document.querySelector('#parent').addEventListener('click', () => log('Обработчик родителя'))

В этом примере для кнопки с помощью метода addEventListener() зарегистрированы два обработчика события click, а для родительского элемента <div> — ещё один. Каждый обработчик добавляет строку в элемент <pre>.

Если флажок снят, при нажатии на кнопку вызываются три обработчика: два для кнопки и один для родителя, так как событие всплывает по дереву DOM. Если флажок отмечен, первый обработчик вызывает метод stopImmediatePropagation(): второй обработчик кнопки и обработчик родителя уже не вызываются. Метод stopPropagation() в этом случае остановил бы только обработчик родителя.