JavaScript свойство Event.cancelBubble

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

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

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

Устарела

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

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

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

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

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

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

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

JavaScript синтаксис

// чтение
const stopped = event.cancelBubble;

// остановка распространения (устаревший способ)
event.cancelBubble = true;

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

DOM Standard.

Пример старого кода

Остановка всплытия через cancelBubble

Нажмите ▶ и кликните по вложенному блоку: в консоли появятся сообщения DIV 1 и DIV 2. Отметьте флажок и кликните снова — сработает только обработчик вложенного блока.

index.html

HTML

<div class="container" data-migration-click-0="">
  DIV 2
  <div data-migration-click-2="">DIV 1 (click me)</div>
</div>
<label>Stop propagation<input type="checkbox" /></label>

main.js

JavaScript

const myFunc = function (event) {
    alert('DIV 1')
    if (document.querySelector('input').checked) {
        event.cancelBubble = true
    }
}

const myFunc2 = function (event) {
    alert('DIV 2')
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function (event) {
    myFunc2()
})
document.querySelector('[data-migration-click-0]').removeAttribute('data-migration-click-0')
document.querySelector('[data-migration-click-2]').addEventListener('click', function (event) {
    myFunc(event)
})
document.querySelector('[data-migration-click-2]').removeAttribute('data-migration-click-2')

style.css

CSS

.container {
    height: 100px;
    padding: 30px;
    background: plum;
}
div > div {
    height: 70px;
    background: yellow;
}

В этом примере мы разместили два элемента <div>, один из которых вложили во внутрь другого, с использованием метода addEventListener() назначили обработчики события "click" (нажатие левой кнопкой мыши на элементе). Если при снятой галочке элемента <input> произвести нажатие по вложенному элементу, то произойдет вызов двух обработчиков события, так как событие будет распространяться вверх по дереву DOM.

А, если мы поставим галочку на элементе <input> и произведем нажатие по вложенному элементу, то в этом случае сработает только обработчик вложенного элемента. Это связано с тем, что мы используем свойства cancelBubble объекта Event, которое при использовании логического значения true прекращает дальнейшую передачу текущего события (предотвращает всплытие по дереву DOM).