stopPropagation vs. stopImmediatePropagation

314

Qual è la differenza tra event.stopPropagation()e event.stopImmediatePropagation()?

javascript jquery

— Arjun
fonte

321

stopPropagationimpedirà qualsiasi genitore gestori vengano eseguiti stopImmediatePropagationimpedirà eventuali gestori genitore e anche eventuali altri gestori di eseguire

Esempio rapido dalla documentazione di 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>

Espandi frammento

Si noti che l'ordine dell'associazione di eventi è importante qui!

Mostra snippet di codice

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

Espandi frammento

— Dave
fonte

1

Enfatizzi il "genitore", ma in realtà entrambi smettono di entrare anche nei bambini se chiamati nella fase di cattura! Vedi la mia risposta per i dettagli.

— Robert Siemer,

57

Un piccolo esempio per dimostrare come funzionano entrambe queste interruzioni della propagazione.

Mostra snippet di codice

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>

Espandi frammento

Esistono tre gestori di eventi associati. Se non fermiamo alcuna propagazione, dovrebbero esserci quattro avvisi: tre sul div figlio e uno sul div genitore.

Se fermiamo la propagazione dell'evento, allora ci saranno 3 allarmi (tutti sul div figlio interno). Poiché l'evento non si propagherà nella gerarchia DOM, il div padre non lo vedrà e il suo gestore non si attiverà.

Se interrompiamo immediatamente la propagazione, ci sarà solo 1 avviso. Anche se ci sono tre gestori di eventi collegati al div figlio interno, solo 1 viene eseguito e ogni ulteriore propagazione viene uccisa immediatamente, anche all'interno dello stesso elemento.

— Anurag
fonte

Entrambe le stopPropagation()varianti smetteranno anche di propagarsi nella gerarchia DOM. Non solo. Si prega di controllare la mia risposta per i dettagli con la fase di cattura.

— Robert Siemer,

26

Dalla API jQuery :

Oltre a impedire l'esecuzione di eventuali gestori aggiuntivi su un elemento, questo metodo interrompe anche il bubbling chiamando implicitamente event.stopPropagation (). Per impedire semplicemente all'evento di gorgogliare agli elementi antenati ma consentire ad altri gestori di eventi di essere eseguiti sullo stesso elemento, possiamo invece utilizzare event.stopPropagation ().

Utilizzare event.isImmediatePropagationStopped () per sapere se questo metodo è mai stato chiamato (su quell'oggetto evento).

In breve: event.stopPropagation()consente l'esecuzione di altri gestori sullo stesso elemento, event.stopImmediatePropagation()impedendo l' esecuzione di ogni evento.

— Aron Rotteveel
fonte

Giusto per essere sicuri, la versione javascript nativa di event.stopImmediatePropagationnon smette di gorgogliare giusto?

— Alexander Derck,

Lo fa, il gorgoglio è quando l'evento viene propagato agli elementi padre, stopImmediatePropagationimpedisce all'evento di essere periodo propagato, entrambi dovrebbero prevenire il gorgoglio, non vale nulla che puoi anche cambiare la modalità di acquisizione che attiverà prima gli elementi più esterni e solo allora scendi ai bambini (il gorgoglio è l'impostazione predefinita e funziona nella direzione opposta)

— JonnySerra

1

Non esatto, per non dire altro. L'arresto nella fase di acquisizione non consentirà l'esecuzione di gestori di bolle sullo stesso elemento come spiegato nella mia risposta.

— Robert Siemer,

23

event.stopPropagationimpedirà l'esecuzione di gestori su elementi padre.
La chiamata event.stopImmediatePropagationimpedirà anche l'esecuzione di altri gestori sullo stesso elemento.

— SLaks
fonte

21

Vale la pena ricordare che i gestori di eventi vengono eseguiti nell'ordine in cui sono stati associati all'elemento.

— Felix Kling

19

Sono in ritardo, ma forse posso dirlo con un esempio specifico:

Di ', se hai un <table>, con <tr>, e poi <td>. Ora, supponiamo che tu abbia impostato 3 gestori di eventi per l' <td>elemento, quindi se lo fai event.stopPropagation()nel primo gestore di eventi per cui hai impostato <td>, tutti i gestori di eventi per <td>verranno comunque eseguiti , ma l'evento non si propaga a <tr>o <table>(e non lo farà andare su e fino a <body>, <html>, document, e window).

Ora, però, se si utilizza event.stopImmediatePropagation()nel tuo primo gestore di eventi, poi, gli altri due gestori di eventi per <td>non funzionerà , e non si propagano fino a <tr>, <table>(e non saliranno e fino a <body>, <html>, document, e window).

Si noti che non è solo per <td>. Per altri elementi, seguirà lo stesso principio.

— nonopolarity
fonte

10

1) event.stopPropagation(): => Viene utilizzato per interrompere solo le esecuzioni del relativo gestore genitore corrispondente.

2) event.stopImmediatePropagation(): => Viene utilizzato per interrompere l'esecuzione del relativo gestore genitore corrispondente e anche del gestore o della funzione collegata a se stesso tranne il gestore corrente. => Arresta anche tutto il gestore collegato all'elemento corrente dell'intero DOM.

Ecco l'esempio: Jsfiddle !

Grazie -Sahil

— Sahil Kashetwar
fonte

3

event.stopPropagation () consente l' esecuzione di altri gestori sullo stesso elemento, mentre event.stopImmediatePropagation () impedisce l'esecuzione di ogni evento. Ad esempio, vedi sotto il blocco di codice jQuery.

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

Se event.stopPropagation è stato utilizzato nell'esempio precedente, il successivo evento click sull'elemento p che modifica il css verrà generato , ma nel caso event.stopImmediatePropagation () , il successivo evento p click non verrà generato .

— Rahul Kumar
fonte

2

Sorprendentemente, tutte le altre risposte dicono solo metà della verità o sono in realtà sbagliate!

e.stopImmediatePropagation() impedisce a qualsiasi altro gestore di essere chiamato per questo evento, senza eccezioni
e.stopPropagation()è simile, ma chiama comunque tutti i gestori per questa fase su questo elemento se non già chiamato

Quale fase?

Ad esempio, un evento clic scenderà sempre fino in fondo al DOM (chiamato "fase di acquisizione"), infine raggiungerà l'origine dell'evento ("fase di destinazione") e quindi tornerà indietro ("fase di bolla"). E con addEventListener()te puoi registrare più gestori per entrambe le fasi di acquisizione e bolla. (La fase target chiama gestori di entrambi i tipi sul target senza distinguere.)

E questo è ciò su cui le altre risposte sono errate:

quote: "event.stopPropagation () consente l'esecuzione di altri gestori sullo stesso elemento"
correzione: se arrestato nella fase di acquisizione, i gestori della fase a bolle non saranno mai raggiunti, saltandoli anche sullo stesso elemento
quote: "event.stopPropagation () [...] viene utilizzato per interrompere solo le esecuzioni del relativo gestore genitore corrispondente"
correzione: se arrestato nella fase di cattura, i gestori di tutti i bambini, incluso il bersaglio, non vengono chiamati neanche, non solo i genitori

_{Una spiegazione della fase dell'evento di violino e mozilla.org con demo.}

— Robert Siemer
fonte

1

Qui sto aggiungendo il mio esempio JSfiddle per 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>

Espandi frammento

— Abhilash
fonte