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

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

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

Для того чтобы просто предотвратить переход события к элементам предкам, но позволить другим обработчикам событий выполняться на том же элементе используйте метод event.stopPropagation() вместо этого.

jQuery синтаксис:

Синтаксис 1.3:
event.stopImmediatePropagation()

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

<div style="width: 100px; height: 100px; background: violet">Нажми на меня</div>

$(document).ready(function () {
    $('div').click(function (event) {
        // задаем функцию при нажатии на элемент <div>
        console.log('function executed') // выводим текстовое сообщение в консоль
        event.stopImmediatePropagation() // прекращаем дальнейшую передачу текущего события
    })
    $('div').click(function (event) {
        // задаем функцию при нажатии на элемент <div>
        console.log('function not executed') // выводим текстовое сообщение в консоль
    })
})

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с помощью метода .click() мы назначили два обработчика события нажатие левой кнопки мыши по элементу <div>.

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