stopPropagation vs. stopImmediatePropagation

Qual é a diferença entre event.stopPropagation() e event.stopImmediatePropagation()?

stopPropagationimpedirá qualquer pais manipuladores sejam executados stopImmediatePropagationirá impedir quaisquer manipuladores de pais e também quaisquer outros manipuladores de execução

Exemplo rápido da documentação do 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>

Observe que a ordem da ligação do evento é importante aqui!

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

Um pequeno exemplo para demonstrar como essas interrupções de propagação funcionam.

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>

Existem três manipuladores de eventos vinculados. Se não pararmos nenhuma propagação, deve haver quatro alertas - três na div filho e um na div pai.

Se pararmos a propagação do evento, haverá 3 alertas (todos na div filho interna). Como o evento não se propaga na hierarquia do DOM, a div pai não o vê e seu manipulador não é acionado.

Se pararmos a propagação imediatamente, haverá apenas 1 alerta. Mesmo que haja três manipuladores de eventos conectados à div filho interna, apenas 1 é executado e qualquer propagação adicional é eliminada imediatamente, mesmo dentro do mesmo elemento.

Na API jQuery :

Além de impedir a execução de manipuladores adicionais em um elemento, esse método também interrompe a interferência chamando implicitamente event.stopPropagation (). Para simplesmente impedir que o evento borbulhe nos elementos ancestrais, mas permita que outros manipuladores de eventos sejam executados no mesmo elemento, podemos usar event.stopPropagation ().

Use event.isImmediatePropagationStopped () para saber se esse método já foi chamado (nesse objeto de evento).

Resumindo: event.stopPropagation()permite que outros manipuladores no mesmo elemento sejam executados, enquanto event.stopImmediatePropagation()impede a execução de todos os eventos.

event.stopPropagationimpedirá a execução de manipuladores nos elementos pai.
A chamada event.stopImmediatePropagationtambém impedirá a execução de outros manipuladores no mesmo elemento.

Estou atrasado, mas talvez eu possa dizer isso com um exemplo específico:

Diga, se você tem um <table>, com <tr>e então <td>. Agora, digamos que você defina 3 manipuladores de eventos para o <td>elemento, se você fizer event.stopPropagation()no primeiro manipulador de eventos definido <td>, todos os manipuladores de eventos <td>ainda serão executados , mas o evento não será propagado para <tr>ou <table>(e não será ir para cima e até <body>, <html>, document, e window).

Agora, no entanto, se você usar event.stopImmediatePropagation()no seu manipulador primeiro evento, em seguida, os outros dois manipuladores de eventos para <td>não será executado , e não irá propagar-se para <tr>, <table>(e não vai subir e até <body>, <html>, document, e window).

Note que não é apenas para <td>. Para outros elementos, seguirá o mesmo princípio.

1) event.stopPropagation(): => É usado para parar as execuções de seu manipulador pai correspondente.

2) event.stopImmediatePropagation(): => É usado para interromper a execução de seu manipulador pai correspondente e também manipulador ou função anexada a ele mesmo, exceto o manipulador atual. => Ele também interrompe todo o manipulador anexado ao elemento atual de todo o DOM.

Aqui está o exemplo: Jsfiddle !

Obrigado, -Sahil

event.stopPropagation () permite que outros manipuladores no mesmo elemento sejam executados, enquanto event.stopImmediatePropagation () impede a execução de todos os eventos. Por exemplo, veja abaixo o bloco de código jQuery.

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

Se event.stopPropagation foi usado no exemplo anterior, o próximo evento click no elemento p que altera o css será acionado , mas no caso event.stopImmediatePropagation () , o próximo evento p click não será acionado .

Surpreendentemente, todas as outras respostas dizem apenas metade da verdade ou estão realmente erradas!

• e.stopImmediatePropagation() impede que qualquer manipulador adicional seja chamado para este evento, sem exceções
• e.stopPropagation()é semelhante, mas não ainda chamar todos os manipuladores para esta fase em este elemento se não já chamado

Que fase?

Por exemplo, um evento de clique sempre percorre primeiro o DOM (chamado "fase de captura"), finalmente alcança a origem do evento ("fase de destino") e depois borbulha novamente ("fase de bolha"). E addEventListener()você pode registrar vários manipuladores para a fase de captura e bolha independentemente. (A fase de destino chama manipuladores de ambos os tipos no destino sem distinção.)

E é sobre isso que as outras respostas estão incorretas:

• citação: “event.stopPropagation () permite que outros manipuladores no mesmo elemento sejam executados”
• correção: se for interrompido na fase de captura, os manipuladores da fase de bolha nunca serão alcançados, ignorando-os no mesmo elemento
• citação: "event.stopPropagation () [...] é usado para parar as execuções de seu manipulador pai correspondente"
• correção: se interrompido na fase de captura, os manipuladores de qualquer criança, incluindo o alvo, também não são chamados, não apenas os pais

_{Uma explicação da fase de eventos do violino e do mozilla.org com demonstração.}

Aqui estou adicionando meu exemplo JSfiddle para 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>