Метод stopPropagation() объекта Event

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

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

Метод stopPropagation() также работает для пользовательских событий, запускаемых с помощью .trigger().

Вы можете воспользоваться методом event.isPropagationStopped() объекта Event, чтобы определить был ли этот метод когда-либо вызван для этого объекта события.

jQuery синтаксис:

Синтаксис 1.0:
event.stopPropagation()

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

Рассмотрим следующий пример в котором создадим элемент для поиска, который будет появляться на навигационной панели при клике на кнопку, а при нажатии на другом месте (не считая самого элемента) будет скрываться :

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода stopPropagation() объекта Event</title>
		<style>nav {
	height: 60px; /* высота элемента */	
	background: #777; /* задний фон элемента */	
}
input {
	display: none; /* элемент не отображается */	
}
</style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function() {
	  $( "button, input" ).click(function( e ) { // задаем функцию при нажатии на элемент <button> или <input>
	    e.stopPropagation(); // предотвращаем всплытие события
	    $( "input" ).is( ":visible" ) ?  null : $( "input" ).fadeIn() // проверяем является ли элемент <input> видимым, если нет, то вызываем эффект fadeIn
						
	    $( "html" ).one({ // приcоединяем функцию обработчика, которая будет выполнена не более одного раза по типу события "click"
	      "click": function( e ) { 
	      $( "input" ).is( ":visible" ) ? $( "input" ).fadeOut() : null // проверяем является ли элемент <input> видимым, если да, то вызываем эффект fadeOut
	      }
	    })
	  })
	});
		</script>
	</head>
	<body>
		<nav>
			<div>
				<button>Поиск</button>
				<input type = "text">
			</div>
		</nav>
	</body>
</html>

В этом примере с помощью метода .click() мы назначили обработчик события нажатие левой кнопки мыши по элементу <button> (кнопка) или <input>. При срабатывании события запускается функция, которая с помощью метода .is() и тернарного оператора проверяет скрыт ли в настоящее время элемент <input>, если элемент скрыт то мы вызываем на элементе эффект .fadeIn(), благодаря которому элемент будет плавно отображен из скрытого состояния в видимое, если элемент видимый, то ничего не делаем.

С помощью метода .one() мы приcоединяем функцию обработчика, которая будет выполнена не более одного раза по типу события клик левой кнопки. При срабатывании этого события мы проверяем скрыт ли элемент и если нет, то мы вызываем на элементе эффект .fadeOut(), благодаря которому элемент будет плавно отображен из видимого состояния в скрытое, если элемент скрытый, то ничего не делаем. В идеале эту проверку можем не проводить, как и дополнительно не проверять на каком элементе вызвано событие (с помощью свойства e.target привязать обработчик в том случае если нажата кнопка, а не <input>)

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

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

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

jQuery события