stopPropagation vs. stopImmediatePropagation

Question

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

Answer 1

stopPropagation verhindert jede Elternteil Handler vor der Ausführung stopImmediatePropagation wird verhindern, dass übergeordnete Handler und auch jede andere Handler von der Ausführung

Kurzes Beispiel aus dem 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 die Reihenfolge der Ereignisbindung hier 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>

Answer 2

Überraschenderweise, todos andere Antworten sagen nur die halbe Wahrheit oder sind sogar falsch!

• e.stopImmediatePropagation() verhindert, dass ein weiterer Handler für dieses Ereignis aufgerufen wird, keine Ausnahmen
• e.stopPropagation() ist ähnlich, ruft aber trotzdem alle Handler für diese Phase en dieses Element wenn nicht bereits aufgerufen

Welche Phase?

So wird z. B. ein Klick-Ereignis immer zuerst ganz nach unten im DOM wandern (als "Capture-Phase" bezeichnet), schließlich den Ursprung des Ereignisses erreichen ("Target-Phase") und dann wieder nach oben wandern ("Bubble-Phase"). Und mit addEventListener() können Sie mehrere Handler für die Erfassungs- und die Blasenphase unabhängig voneinander registrieren. (Die Zielphase ruft Handler beider Typen auf dem Ziel auf, ohne zu unterscheiden).

Und genau das ist es, was in den anderen Antworten nicht stimmt:

• Zitat: "event.stopPropagation() ermöglicht die Ausführung anderer Handler für dasselbe Element"
  • Korrektur: Wenn in der Fangphase angehalten wird, werden die Handler der Blasenphase nie erreicht, sie auch auf demselben Element zu überspringen
• Zitat: "event.stopPropagation() [...] wird nur verwendet, um die Ausführung des entsprechenden übergeordneten Handlers zu stoppen"
  • Korrektur: Wenn die Ausbreitung in der Erfassungsphase gestoppt wird, werden die Handler auf allen Kinder, einschließlich der Zielperson werden auch nicht angerufen, nicht nur Eltern
  • ...und: Wenn die Ausbreitung in der Blasenphase gestoppt wird, wurden alle Handler der Einfangphase bereits aufgerufen, auch die der Eltern.

_{A <a href="https://jsfiddle.net/siemer/3qfo57zj/17/" rel="noreferrer">fiddle </a>und mozilla.org <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase" rel="noreferrer">Ereignisphase </a>Erklärung mit Demo.}

Answer 3

Ein kleines Beispiel soll zeigen, 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 keine Weitergabe stoppen, dann sollte es vier Warnungen geben - drei auf dem untergeordneten Div und eine auf dem übergeordneten Div.

Wenn wir das Ereignis von der Ausbreitung zu stoppen, dann wird es 3 Warnungen (alle auf der inneren Kind div). Da das Ereignis nicht propagieren bis die DOM-Hierarchie, die übergeordnete div wird nicht sehen, und seine Handler wird nicht ausgelöst.

Wenn die Ausbreitung sofort gestoppt wird, gibt es nur noch eine Meldung. Obwohl es drei Event-Handler gibt, die an das innere Child-Div angehängt sind, wird nur einer ausgeführt und jede weitere Ausbreitung wird sofort beendet, sogar innerhalb desselben Elements.

Answer 4

Ich bin ein Nachzügler, aber vielleicht kann ich das an einem konkreten Beispiel erläutern:

Nehmen wir an, Sie haben eine <table> , mit <tr> und dann <td> . Nehmen wir an, Sie setzen 3 Event-Handler für die <td> Element, wenn Sie dann event.stopPropagation() im ersten Ereignis-Handler, den Sie für <td> , dann alle Ereignisbehandler für <td> wird noch laufen aber das Ereignis überträgt sich nicht auf <tr> ou <table> (und geht nicht auf und ab bis <body> , <html> , document y window ).

Wenn Sie nun aber event.stopImmediatePropagation() in Ihrem ersten Event-Handler, dann, die beiden anderen Ereignisbehandler für <td> wird nicht ausgeführt und wird sich nicht bis zu <tr> , <table> (und geht nicht auf und ab bis <body> , <html> , document y window ).

Beachten Sie, dass es nicht nur für <td> . Für andere Elemente gilt das gleiche Prinzip.

Answer 5

event.stopPropagation verhindert, dass Handler auf übergeordneten Elementen ausgeführt werden.
Aufruf von event.stopImmediatePropagation verhindert auch die Ausführung anderer Handler für dasselbe Element.