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

JavaScript Event

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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
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 свойства cancelBubble объекта Event
JavaScript Event
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.