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

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

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

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

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`cancelBubble`	Да	53.0*	Да	Да	Да	Да

JavaScript синтаксис:

event.cancelBubble

Версия JavaScript

Document Object Model (DOM) Level 2 Events

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript свойства cancelBubble объекта Event</title>
    <style>
    .container {
        height: 100px;
        padding: 30px;
        background: plum;  
    }
    div > div {
        height: 70px;
        background: yellow;
    }
    </style>
	</head>
	<body>
		<div class = "container" onclick="myFunc2()">DIV 2
		        <div onclick = "myFunc(event)">DIV 1 (click me)</div>
		</div>
		<label>Stop propagation<input type = "checkbox"></label>
		<script>
	const myFunc = function( event ) {
	  alert("DIV 1"); // выводим окно предупреждения с указанным сообщением
	  if ( document.querySelector("input").checked ) { // находим элемент input и проверяем выбран ли checkbox
	    event.cancelBubble = true; // прекращаем дальнейшую передачу текущего события
	  }
	}
	const myFunc2 = function() {
	  alert("DIV 2"); // выводим окно предупреждения с указанным сообщением
	}
		</script>
	</body>
</html>

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

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

Результат нашего примера:

Пример использования JavaScript свойства cancelBubble объекта Event

JavaScript Event