stopPropagation против stopImmediatePropagation

Question

В чем разница между event.stopPropagation() и event.stopImmediatePropagation()?

Answer 1

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>

Answer 2

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

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, и любое дальнейшее распространение немедленно прекращается, даже в пределах одного элемента.

Answer 3

Из jQuery API :

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

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

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

Answer 4

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

Answer 5

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

Скажите, если у вас есть <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>. Для других элементов он будет следовать тому же принципу.

Answer 6

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

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

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

Спасибо, -Sahil

Answer 7

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-щелчка не сработает.

Answer 8

Здесь я добавляю свой пример 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>