stopPropagation vs. stopImmediatePropagation

Question

Was ist der Unterschied zwischen event.stopPropagation() et event.stopImmediatePropagation() ?

Answer 1

De la jQuery-API :

Zusätzlich zur Aufbewahrung aller zusätzlichen Handler für ein Element nicht ausgeführt werden ausgeführt werden, stoppt diese Methode auch das Blubbern durch impliziten Aufruf von event.stopPropagation(). Um einfach zu verhindern, dass das Ereignis an Vorgängerelementen zu verhindern, aber anderen Event-Handler auf demselben Element auszuführen Element auszuführen, können wir event.stopPropagation() stattdessen verwenden.

Verwenden Sie event.isImmediatePropagationStopped() um zu wissen ob diese Methode jemals aufgerufen wurde (für dieses Ereignisobjekt).

Kurz gesagt: event.stopPropagation() ermöglicht die Ausführung anderer Handler für dasselbe Element, während event.stopImmediatePropagation() verhindert jede Ereignis von der Ausführung.

Answer 2

1) event.stopPropagation(): =>Er wird nur verwendet, um die Ausführung des entsprechenden übergeordneten Handlers zu stoppen.

2) event.stopImmediatePropagation(): => Er wird verwendet, um die Ausführung des entsprechenden übergeordneten Handlers und aller an ihn angehängten Handler oder Funktionen außer dem aktuellen Handler zu stoppen. => Er stoppt auch alle Handler, die mit dem aktuellen Element des gesamten DOM verbunden sind.

Hier ist das Beispiel: Jsfiddle ¡!

Danke! -Sahil

Answer 3

Hier ist eine Demo, die den Unterschied verdeutlicht:

document.querySelectorAll("button")[0].addEventListener('click', e=>{
  e.stopPropagation();
  alert(1);
});
document.querySelectorAll("button")[1].addEventListener('click', e=>{
  e.stopImmediatePropagation();
  alert(1);
});
document.querySelectorAll("button")[0].addEventListener('click', e=>{
  alert(2);
});
document.querySelectorAll("button")[1].addEventListener('click', e=>{
  alert(2);
});

<div onclick="alert(3)">
   <button>1...2</button>
   <button>1</button>
</div>

Beachten Sie, dass Sie mehrere Ereignisbehandler an ein Ereignis eines Elements anhängen können.

Answer 4

event.stopPropagation() ermöglicht die Ausführung anderer Handler für dasselbe Element, während event.stopImmediatePropagation() verhindert, dass jedes Ereignis ausgeführt wird. Siehe zum Beispiel den folgenden jQuery-Codeblock.

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

Wenn event.stopPropagation im vorherigen Beispiel verwendet wurde, wird das nächste Klick-Ereignis auf das p-Element, das die CSS ändert, ausgelöst, aber im Fall event.stopImmediatePropagation() wird das nächste p-Klick-Ereignis nicht ausgelöst.

Answer 5

Hier füge ich mein JSfiddle Beispiel für stopPropagation vs stopImmediatePropagation hinzu. 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>