Есть желание присоединиться к интересным IT проектам? Смотри открытые вакансии.

JavaScript метод Event.stopPropagation()

JavaScript Event

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

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

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

МетодChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
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 метода stopPropagation() объекта Event
JavaScript Event
×

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

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

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