stopPropagation vs. stopImmediatePropagation

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

stopPropagationwird verhindert , dass alle Eltern von Handler ausgeführt wird stopImmediatePropagationkeine übergeordneten Handler verhindern wird und auch keine anderen aus Handler ausführt

Kurzes Beispiel aus der jquery-Dokumentation:

$("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>

Beachten Sie, dass hier die Reihenfolge der Ereignisbindung wichtig ist!

$("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>

Ein kleines Beispiel, um zu demonstrieren, wie diese beiden Ausbreitungsstopps funktionieren.

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>

Es sind drei Ereignishandler gebunden. Wenn wir die Weitergabe nicht stoppen, sollten vier Warnungen vorhanden sein - drei für die untergeordnete Div und eine für die übergeordnete Div.

Wenn wir verhindern, dass sich das Ereignis ausbreitet, gibt es 3 Warnungen (alle auf dem inneren untergeordneten Div). Da das Ereignis die DOM-Hierarchie nicht weitergibt, wird es vom übergeordneten div nicht angezeigt und der Handler wird nicht ausgelöst.

Wenn wir die Ausbreitung sofort stoppen, gibt es nur 1 Alarm. Obwohl dem inneren untergeordneten div drei Ereignishandler zugeordnet sind, wird nur 1 ausgeführt und jede weitere Weitergabe wird sofort beendet, selbst innerhalb desselben Elements.

Aus der jQuery-API :

Diese Methode verhindert nicht nur, dass zusätzliche Handler für ein Element ausgeführt werden, sondern stoppt auch das Sprudeln, indem sie implizit event.stopPropagation () aufruft. Um einfach zu verhindern, dass das Ereignis zu Vorfahrenelementen sprudelt, aber anderen Ereignishandlern die Ausführung auf demselben Element ermöglicht, können wir stattdessen event.stopPropagation () verwenden.

Verwenden Sie event.isImmediatePropagationStopped (), um festzustellen, 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 wird , dass jedes Ereignis ausgeführt wird.

event.stopPropagationverhindert, dass Handler für übergeordnete Elemente ausgeführt werden.
Durch das Aufrufen event.stopImmediatePropagationwird auch verhindert, dass andere Handler auf demselben Element ausgeführt werden.

Ich bin ein Spätankömmling, aber vielleicht kann ich das anhand eines konkreten Beispiels sagen:

Sagen Sie, wenn Sie ein <table>, mit <tr>und dann haben <td>. Angenommen, Sie legen 3 Ereignishandler für das <td>Element fest. Wenn Sie dies event.stopPropagation()im ersten Ereignishandler tun, für den Sie festgelegt haben <td>, werden alle Ereignishandler für <td>weiterhin ausgeführt , aber das Ereignis wird einfach nicht an <tr>oder weitergegeben <table>(und wird es auch nicht) gehen und bis zu <body>, <html>, document, undwindow ).

Nun aber, wenn Sie verwenden event.stopImmediatePropagation()in Ihrem ersten Event - Handler, dann die beiden anderen Event - Handler für <td>nicht ausgeführt werden , und wird nicht propagieren bis zu <tr>, <table>(und wird nicht gehen und bis zu <body>, <html>, documentund window).

Beachten Sie, dass es nicht nur für ist <td>. Für andere Elemente folgt es dem gleichen Prinzip.

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

2) event.stopImmediatePropagation(): => Es wird verwendet, um die Ausführung des entsprechenden übergeordneten Handlers sowie des Handlers oder der Funktion zu stoppen, die mit Ausnahme des aktuellen Handlers an sich selbst angehängt ist. => Es stoppt auch alle Handler, die an das aktuelle Element des gesamten DOM angehängt sind.

Hier ist das Beispiel: Jsfiddle !

Danke, -Sahil

Mit event.stopPropagation () können andere Handler für dasselbe Element ausgeführt werden, 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 im vorherigen Beispiel event.stopPropagation verwendet wurde, wird das nächste Klickereignis auf das p-Element ausgelöst, das das CSS ändert. Falls event.stopImmediatePropagation () , wird das nächste p- Klickereignis nicht ausgelöst .

Überraschenderweise sagen alle anderen Antworten nur die halbe Wahrheit oder sind tatsächlich falsch!

• e.stopImmediatePropagation() verhindert, dass weitere Handler für dieses Ereignis aufgerufen werden, ohne Ausnahmen
• e.stopPropagation()ist ähnlich, ruft aber immer noch alle Handler für diese Phase für dieses Element auf, wenn es nicht bereits aufgerufen wurde

Welche Phase?

ZB geht ein Klickereignis immer zuerst den gesamten Weg durch das DOM (als „Erfassungsphase“ bezeichnet), erreicht schließlich den Ursprung des Ereignisses („Zielphase“) und sprudelt dann wieder hoch („Blasenphase“). Und mitaddEventListener() Sie mehrere Handler unabhängig voneinander für die Erfassungs- und die Blasenphase registrieren. (Zielphase ruft Handler beider Typen auf dem Ziel auf, ohne zu unterscheiden.)

Und das ist es, worüber die anderen Antworten falsch sind:

• Zitat: "event.stopPropagation () ermöglicht die Ausführung anderer Handler für dasselbe Element."
• Korrektur: Wenn sie in der Erfassungsphase gestoppt werden, werden die Blasenphasen-Handler niemals erreicht und überspringen sie auch auf demselben Element
• Zitat: "event.stopPropagation () [...] wird verwendet, um nur die Ausführung des entsprechenden übergeordneten Handlers zu stoppen."
• Korrektur: Wenn in der Erfassungsphase gestoppt, werden auch die Handler aller Kinder, einschließlich des Ziels, nicht aufgerufen, nicht nur die Eltern

_{Eine Erklärung zur Ereignisphase von fiddle und mozilla.org mit Demo.}

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>