stopPropagation против stopImmediatePropagation

Какая разница между event.stopPropagation()а event.stopImmediatePropagation()?

stopPropagationпредотвратит выполнение родительских обработчиков, stopImmediatePropagationзапретит выполнение любых родительских обработчиков, а также любых других обработчиков

Быстрый пример из документации jquery:

$("p").click(function(event) {
  event.stopImmediatePropagation();
});

$("p").click(function(event) {
  // This function won't be executed
  $(this).css("background-color", "#f00");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>example</p>

Обратите внимание, что здесь важен порядок привязки события!

$("p").click(function(event) {
  // This function will now trigger
  $(this).css("background-color", "#f00");
});

$("p").click(function(event) {
  event.stopImmediatePropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>example</p>

Небольшой пример, чтобы продемонстрировать, как работают оба эти остановки распространения.

var state = {
  stopPropagation: false,
  stopImmediatePropagation: false
};

function handlePropagation(event) {
  if (state.stopPropagation) {
    event.stopPropagation();
  }

  if (state.stopImmediatePropagation) {
    event.stopImmediatePropagation();
  }
}

$("#child").click(function(e) {
  handlePropagation(e);
  console.log("First event handler on #child");
});


$("#child").click(function(e) {
  handlePropagation(e);
  console.log("Second event handler on #child");
});

// First this event will fire on the child element, then propogate up and
// fire for the parent element.
$("div").click(function(e) {
  handlePropagation(e);
  console.log("Event handler on div: #" + this.id);
});


// Enable/disable propogation
$("button").click(function() {
  var objectId = this.id;
  $(this).toggleClass('active');
  state[objectId] = $(this).hasClass('active');
  console.log('---------------------');
});

div {
  padding: 1em;
}

#parent {
  background-color: #CCC;
}

#child {
  background-color: #000;
  padding: 5em;
}

button {
  padding: 1em;
  font-size: 1em;
}

.active {
  background-color: green;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child">&nbsp;</div>
</div>

<button id="stopPropagation">Stop Propogation</button>
<button id="stopImmediatePropagation" ">Stop Immediate Propogation</button>

Есть три связанных обработчика событий. Если мы не остановим распространение, то должно быть четыре оповещения - три для дочернего элемента div и одно для родительского элемента div.

Если мы остановим распространение события, то будет 3 оповещения (все на внутреннем дочернем элементе div). Поскольку событие не распространяется по иерархии DOM, родительский div не увидит его, и его обработчик не сработает.

Если мы немедленно остановим распространение, то будет только 1 предупреждение. Несмотря на то, что к внутреннему дочернему элементу div прикреплены три обработчика событий, выполняется только 1, и любое дальнейшее распространение немедленно прекращается, даже внутри одного и того же элемента.

Из API jQuery :

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

Используйте event.isImmediatePropagationStopped (), чтобы узнать, был ли когда-либо вызван этот метод (для этого объекта события).

Вкратце: event.stopPropagation()разрешает выполнение других обработчиков на том же элементе, в то же время event.stopImmediatePropagation()предотвращает запуск каждого события.

event.stopPropagationпредотвратит запуск обработчиков на родительских элементах.
Вызов event.stopImmediatePropagationтакже предотвратит запуск других обработчиков на том же элементе.

Я опоздал, но, может быть, я могу сказать это на конкретном примере:

Скажем, если у вас есть <table>, с <tr>, а потом <td>. Теперь предположим, что вы установили 3 обработчика событий для <td>элемента, затем, если вы сделаете event.stopPropagation()первый обработчик событий, для которого вы установили <td>, все обработчики событий для по- <td>прежнему будут работать , но событие просто не будет распространяться на <tr>или <table>(и не будет идти и до <body>, <html>, documentи window).

Теперь, однако, если вы используете event.stopImmediatePropagation()в своем первом обработчике событий, то остальные два обработчика событий для <td>не будет работать , и не будет распространяться до <tr>, <table>(и не будет идти и до <body>, <html>, document, и window).

Обратите внимание, что это не только для <td>. Для других элементов это будет следовать тому же принципу.

1) event.stopPropagation(): => Используется только для остановки выполнения соответствующего родительского обработчика.

2) event.stopImmediatePropagation(): => Используется для остановки выполнения соответствующего родительского обработчика, а также обработчика или функции, прикрепленной к себе, кроме текущего обработчика. => Также останавливает весь обработчик, прикрепленный к текущему элементу всего DOM.

Вот пример: Jsfiddle !

Спасибо, -Сахил

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

$("p").click(function(event)
{ event.stopImmediatePropagation();
});
$("p").click(function(event)
{ // This function won't be executed 
$(this).css("color", "#fff7e3");
});

Если в предыдущем примере было использовано event.stopPropagation, то сработает следующее событие щелчка на элементе p, который изменяет CSS, но в случае event.stopImmediatePropagation () следующее событие p щелчка не сработает.

Удивительно, но все остальные ответы говорят только половину правды или на самом деле неверны!

• e.stopImmediatePropagation() останавливает вызов любого другого обработчика для этого события, без исключений
• e.stopPropagation()аналогично, но все же вызывает все обработчики для этой фазы на этом элементе, если он еще не вызван

Какой этап?

Например, событие щелчка всегда будет сначала идти вниз по DOM (так называемая «фаза захвата»), в конце концов достигнет источника события («целевая фаза»), а затем снова всплывет («фаза пузыря»). И addEventListener()вы можете зарегистрировать несколько обработчиков для захвата и пузыря фазы независимо (Целевая фаза вызывает обработчики обоих типов на цели без различения.)

И это то, что другие ответы неверны:

• цитата: «event.stopPropagation () позволяет выполнять другие обработчики на том же элементе»
• исправление: если остановлено в фазе захвата, обработчики пузырьковой фазы никогда не будут достигнуты, также пропуская их на том же элементе
• цитата: «event.stopPropagation () [...] используется, чтобы остановить выполнение только соответствующего родительского обработчика»
• исправление: если остановлено в фазе захвата, обработчики на любых дочерних элементах, включая цель , также не вызываются, не только родители

_{Скрипка и mozilla.org фазы событий объяснения с демо.}

Здесь я добавляю свой пример JSfiddle для stopPropagation против stopImmediatePropagation. JSFIDDLE

let stopProp = document.getElementById('stopPropagation');
let stopImmediate = document.getElementById('stopImmediatebtn');
let defaultbtn = document.getElementById("defalut-btn");


stopProp.addEventListener("click", function(event){
	event.stopPropagation();
  console.log('stopPropagation..')
  
})
stopProp.addEventListener("click", function(event){
  console.log('AnotherClick')
  
})
stopImmediate.addEventListener("click", function(event){
		event.stopImmediatePropagation();
    console.log('stopimmediate')
})

stopImmediate.addEventListener("click", function(event){
    console.log('ImmediateStop Another event wont work')
})

defaultbtn.addEventListener("click", function(event){
    alert("Default Clik");
})
defaultbtn.addEventListener("click", function(event){
    console.log("Second event defined will also work same time...")
})

div{
  margin: 10px;
}

<p>
The simple example for event.stopPropagation and stopImmediatePropagation?
Please open console to view the results and click both button.
</p>
<div >
<button id="stopPropagation">
stopPropagation-Button
</button>
</div>
<div  id="grand-div">
  <div class="new" id="parent-div">
    <button id="stopImmediatebtn">
    StopImmediate
    </button>
  </div>
</div>
<div>
<button id="defalut-btn">
Normat Button
</button>
</div>