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

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

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

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

jQuery синтаксис:

Синтаксис 1.0:

event.stopPropagation()

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

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

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

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<nav>
  <div>
    <button>Поиск</button>
    <input type="text" />
  </div>
</nav>

main.js

JavaScript

$(document).ready(function () {
    $('button, input').click(function (e) {
        e.stopPropagation()
        $('input').is(':visible') ? null : $('input').fadeIn()

        $('html').one({
            click: function (e) {
                $('input').is(':visible') ? $('input').fadeOut() : null
            },
        })
    })
})

style.css

CSS

nav {
    height: 60px;
    background: #777;
}
input {
    display: none;
}

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

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

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