JavaScript метод Event.stopPropagation()

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

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

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

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`stopPropagation()`	Да	Да	Да	Да	9.0	Да

JavaScript синтаксис:

event.stopPropagation()

Версия JavaScript

Document Object Model (DOM) Level 3 Events

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript метода stopPropagation() объекта 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.stopPropagation(); // прекращаем дальнейшую передачу текущего события
	  }
	}
	const myFunc2 = function() {
	  alert("DIV 2"); // выводим окно предупреждения с указанным сообщением
	}
		</script>
	</body>
</html>

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

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

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

Пример использования JavaScript метода stopPropagation() объекта Event

JavaScript Event