JavaScript метод Event.stopImmediatePropagation()

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

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

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

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

JavaScript синтаксис:

event.stopImmediatePropagation()

Версия JavaScript

Document Object Model (DOM) Level 3 Events

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript метода stopImmediatePropagation() объекта 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 immediate propagation<input type = "checkbox"></label>
		<script>
	const myFunc = function( event ) {
	  alert("DIV 1"); // выводим окно предупреждения с указанным сообщением
	  if ( document.querySelector("input").checked ) { // находим элемент input и проверяем выбран ли checkbox
	    event.stopImmediatePropagation(); // прекращаем дальнейшую передачу текущего события и останавливаем цепочку вызова событий
	  }
	}
	const myFunc2 = function() {
	  alert("DIV 2"); // выводим окно предупреждения с указанным сообщением
	}
	document.querySelector("div > div") // выбираем вложенный элемент div
                .addEventListener("click", () => alert("one more listener")); // добавляем для него обработчик события "click"  
		</script>
	</body>
</html>

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

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

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

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

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

JavaScript Event