stopPropagation vs stopImmediatePropagation

Quelle est la différence entre event.stopPropagation()et event.stopImmediatePropagation()?

stopPropagationempêchera tout gestionnaire parent d'être exécuté stopImmediatePropagationempêchera tout gestionnaire parent et tout autre gestionnaire de s'exécuter

Exemple rapide de la documentation 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>

Notez que l'ordre de la liaison d'événement est important ici!

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

Un petit exemple pour montrer comment ces deux arrêts de propagation fonctionnent.

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>

Il existe trois gestionnaires d'événements liés. Si nous n'arrêtons aucune propagation, il devrait y avoir quatre alertes - trois sur la division enfant et une sur la division parent.

Si nous empêchons l'événement de se propager, il y aura alors 3 alertes (toutes sur la division enfant intérieure). Étant donné que l'événement ne se propage pas dans la hiérarchie DOM, le div parent ne le voit pas et son gestionnaire ne se déclenche pas.

Si nous arrêtons immédiatement la propagation, il n'y aura qu'une seule alerte. Même s'il existe trois gestionnaires d'événements attachés à la division enfant intérieure, un seul est exécuté et toute propagation ultérieure est immédiatement interrompue, même dans le même élément.

Depuis l' API jQuery :

En plus d'empêcher l'exécution de tout gestionnaire supplémentaire sur un élément, cette méthode arrête également le bouillonnement en appelant implicitement event.stopPropagation (). Pour simplement empêcher l'événement de se propager aux éléments ancêtres mais permettre à d'autres gestionnaires d'événements de s'exécuter sur le même élément, nous pouvons utiliser event.stopPropagation () à la place.

Utilisez event.isImmediatePropagationStopped () pour savoir si cette méthode a déjà été appelée (sur cet objet événement).

En bref: event.stopPropagation()permet d'exécuter d'autres gestionnaires sur le même élément, tout en event.stopImmediatePropagation()empêchant chaque événement de s'exécuter.

event.stopPropagationempêchera les gestionnaires des éléments parents de s'exécuter.
L'appel event.stopImmediatePropagationempêchera également l'exécution d'autres gestionnaires sur le même élément.

Je suis un retardataire, mais je peux peut-être le dire avec un exemple précis:

Dites, si vous avez un <table>, avec <tr>, puis <td>. Supposons maintenant que vous définissez 3 gestionnaires d'événements pour l' <td>élément, puis si vous le faites event.stopPropagation()dans le premier gestionnaire d'événements que vous définissez <td>, tous les gestionnaires d'événements pour <td>seront toujours exécutés , mais l'événement ne se propagera tout simplement pas vers <tr>ou <table>(et ne monter et jusqu'à <body>, <html>, documentet window).

Maintenant, cependant, si vous utilisez event.stopImmediatePropagation()dans votre premier gestionnaire d'événements, puis, les deux autres gestionnaires d'événements pour <td>ne fonctionnera pas , et ne se propagent pas à <tr>, <table>(et ne va pas et jusqu'à <body>, <html>, documentet window).

Notez que ce n'est pas seulement pour <td>. Pour les autres éléments, il suivra le même principe.

1) event.stopPropagation(): => Il est utilisé pour arrêter uniquement les exécutions de son gestionnaire parent correspondant.

2) event.stopImmediatePropagation(): => Il est utilisé pour arrêter l'exécution de son gestionnaire parent correspondant ainsi que le gestionnaire ou la fonction attaché à lui-même à l'exception du gestionnaire actuel. => Il arrête également tous les gestionnaires attachés à l'élément courant de l'ensemble du DOM.

Voici l'exemple: Jsfiddle !

Merci, -Sahil

event.stopPropagation () permet d' exécuter d' autres gestionnaires sur le même élément, tandis que event.stopImmediatePropagation () empêche chaque événement de s'exécuter. Par exemple, voir ci-dessous le bloc de code jQuery.

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

Si event.stopPropagation a été utilisé dans l'exemple précédent, le prochain événement click sur l'élément p qui modifie le css se déclenchera, mais dans le cas event.stopImmediatePropagation () , l'événement p click suivant ne se déclenchera pas.

Étonnamment, toutes les autres réponses ne disent que la moitié de la vérité ou sont en fait fausses!

• e.stopImmediatePropagation() empêche tout autre gestionnaire d'être appelé pour cet événement, sans exception
• e.stopPropagation()est similaire, mais appelle toujours tous les gestionnaires de cette phase sur cet élément s'il n'est pas déjà appelé

Quelle phase?

Par exemple, un événement de clic ira toujours tout le long du DOM (appelé «phase de capture»), atteindra finalement l'origine de l'événement («phase cible»), puis remontera («phase de bulle»). Et avec addEventListener()vous, vous pouvez enregistrer plusieurs gestionnaires indépendamment pour la capture et la phase à bulles. (La phase cible appelle des gestionnaires des deux types sur la cible sans distinction.)

Et voici ce que les autres réponses sont incorrectes:

• quote: "event.stopPropagation () permet d'exécuter d'autres gestionnaires sur le même élément"
• correction: en cas d'arrêt en phase de capture, les gestionnaires de phase bulle ne seront jamais atteints, sautant également sur le même élément
• quote: "event.stopPropagation () [...] est utilisé pour arrêter uniquement les exécutions de son gestionnaire parent correspondant"
• Correction: en cas d'arrêt dans la phase de capture, les gestionnaires de tous les enfants, y compris la cible, ne sont pas appelés non plus, pas seulement les parents

_{Une explication de la phase de l'événement fiddle et mozilla.org avec démo.}

Ici, j'ajoute mon exemple JSfiddle pour stopPropagation vs 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>