stopPropagation vs. stopImmediatePropagation

314

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

javascript jquery

— Arjun
fonte

321

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>

Expandir snippet

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

Mostrar snippet de código

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

Expandir snippet

— Dave
fonte

1

Você enfatiza "pai", mas, na realidade, ambos também param de entrar nos filhos, se chamados na fase de captura! Veja minha resposta para detalhes.

— Robert Siemer

57

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

Mostrar snippet de código

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>

Expandir snippet

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.

— Anurag
fonte

As duas stopPropagation()variantes também param de se propagar na hierarquia do DOM. Não apenas para cima. Por favor, verifique minha resposta para obter detalhes com a fase de captura.

— Robert Siemer 26/03

26

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.

— Aron Rotteveel
fonte

Só para ter certeza, a versão javascript nativa do event.stopImmediatePropagationnão para de borbulhar, certo?

— Alexander Derck 11/11

Sim, borbulhar é quando o evento é propagado para os elementos-pai, stopImmediatePropagationimpede que o evento seja propagado, ambos devem evitar borbulhamento, não vale nada que você também possa alterar o modo de captura que acionará os elementos mais externos primeiro e só então ir para baixo para as crianças (borbulhante é o padrão, e trabalha na direção oposta)

— JonnySerra

1

Não é exato, para dizer o mínimo. Parar na fase de captura não permitirá que manipuladores de bolhas no mesmo elemento sejam executados, conforme explicado na minha resposta.

— Robert Siemer 26/03

23

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.

— SLaks
fonte

21

Vale ressaltar que os manipuladores de eventos são executados na ordem em que foram anexados ao elemento.

— Felix Kling 14/03

19

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.

— falta de polaridade
fonte

10

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

— Sahil Kashetwar
fonte

3

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 .

— Rahul Kumar
fonte

2

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.}

— Robert Siemer
fonte

1

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>

Expandir snippet

— Abhilash
fonte