stopPropagation vs stopImmediatePropagation

Question

What s the difference between event stopPropagation   and event stopImmediatePropagation

User · Answer

Here is a demo to illustrate the difference:

_x000D_

document.querySelectorAll("button")[0].addEventListener('click', e=>{
  e.stopPropagation();
  alert(1);
});
document.querySelectorAll("button")[1].addEventListener('click', e=>{
  e.stopImmediatePropagation();
  alert(1);
});
document.querySelectorAll("button")[0].addEventListener('click', e=>{
  alert(2);
});
document.querySelectorAll("button")[1].addEventListener('click', e=>{
  alert(2);
});

_x000D_

<div onclick="alert(3)">
   <button>1...2</button>
   <button>1</button>
</div>

_x000D_

Notice that you can attach multiple event handlers to an event on an element.

User · Answer

1 event stopPropagation       It is used to stop executions of its corresponding parent handler only   2  event stopImmediatePropagation         It is used to stop the execution of its corresponding parent handler and also handler or function attached to itself except the current handler       It also stops all the handler attached to the current element of entire DOM   Here is the example  Jsfiddle   Thanks  -Sahil

User · Answer

stopPropagation will prevent any parent handlers from being executed stopImmediatePropagation will prevent any parent handlers and also any other handlers from executing   Quick example from the jquery documentation     x000D   x000D     p   click function event    x000D    event stopImmediatePropagation    x000D      x000D   x000D     p   click function event    x000D       This function won t be executed x000D      this  css  background-color     f00    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt p gt example lt  p gt  x000D   x000D   x000D    Note that the order of the event binding is important here    x000D   x000D     p   click function event    x000D       This function will now trigger x000D      this  css  background-color     f00    x000D      x000D   x000D     p   click function event    x000D    event stopImmediatePropagation    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt p gt example lt  p gt  x000D   x000D   x000D

User · Answer

Here I am adding my JSfiddle example for stopPropagation vs stopImmediatePropagation  JSFIDDLE   x000D   x000D  let stopProp   document getElementById  stopPropagation    x000D  let stopImmediate   document getElementById  stopImmediatebtn    x000D  let defaultbtn   document getElementById  defalut-btn    x000D   x000D   x000D  stopProp addEventListener  click   function event   x000D   event stopPropagation    x000D    console log  stopPropagation     x000D     x000D     x000D  stopProp addEventListener  click   function event   x000D    console log  AnotherClick   x000D     x000D     x000D  stopImmediate addEventListener  click   function event   x000D    event stopImmediatePropagation    x000D      console log  stopimmediate   x000D     x000D   x000D  stopImmediate addEventListener  click   function event   x000D      console log  ImmediateStop Another event wont work   x000D     x000D   x000D  defaultbtn addEventListener  click   function event   x000D      alert  Default Clik    x000D     x000D  defaultbtn addEventListener  click   function event   x000D      console log  Second event defined will also work same time      x000D     x000D  div  x000D    margin  10px  x000D    x000D   lt p gt  x000D  The simple example for event stopPropagation and stopImmediatePropagation  x000D  Please open console to view the results and click both button  x000D   lt  p gt  x000D   lt div  gt  x000D   lt button id  stopPropagation  gt  x000D  stopPropagation-Button x000D   lt  button gt  x000D   lt  div gt  x000D   lt div  id  grand-div  gt  x000D     lt div class  new  id  parent-div  gt  x000D       lt button id  stopImmediatebtn  gt  x000D      StopImmediate x000D       lt  button gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt div gt  x000D   lt button id  defalut-btn  gt  x000D  Normat Button x000D   lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

event stopPropagation will prevent handlers on parent elements from running  Calling event stopImmediatePropagation will also prevent other handlers on the same element from running

User · Answer

From the jQuery API      In addition to keeping any additional   handlers on an element from being   executed  this method also stops the   bubbling by implicitly calling   event stopPropagation    To simply   prevent the event from bubbling to   ancestor elements but allow other   event handlers to execute on the same   element  we can use   event stopPropagation   instead       Use   event isImmediatePropagationStopped     to know whether this method was ever   called  on that event object     In short  event stopPropagation   allows other handlers on the same element to be executed  while event stopImmediatePropagation   prevents every event from running

User · Answer

Surprisingly  all other answers only say half the truth or are actually wrong   e stopImmediatePropagation   stops any further handler from being called for this event  no exceptions e stopPropagation   is similar  but does still call all handlers for this phase on this element if not called already  What phase  E g  a click event will always first go all the way down the DOM  called    capture phase      finally reach the origin of the event     target phase     and then bubble up again     bubble phase      And with addEventListener   you can register multiple handlers for both capture and bubble phase independently   Target phase calls handlers of both types on the target without distinguishing   And this is what the other answers are incorrect about   quote     event stopPropagation   allows other handlers on the same element to be executed     correction  if stopped in the capture phase  bubble phase handlers will never be reached  also skipping them on the same element   quote     event stopPropagation         is used to stop executions of its corresponding parent handler only     correction  if propagation is stopped in the capture phase  handlers on any children  including the target aren   t called either  not only parents    and  if propagation is stopped in the bubble phase  all capture phase handlers have already been called  including those on parents    A fiddle and mozilla org event phase explanation with demo

User · Answer

event stopPropagation   allows other handlers on the same element to be executed  while event stopImmediatePropagation   prevents every event from running  For example  see below jQuery code block      p   click function event    event stopImmediatePropagation           p   click function event       This function won t be executed    this  css  color     fff7e3          If event stopPropagation was used in previous example  then the next click event on p element which changes the css will fire  but in case event stopImmediatePropagation    the next p click event will not fire

User · Answer

I am a late comer  but maybe I can say this with a specific example   Say  if you have a  lt table gt   with  lt tr gt   and then  lt td gt    Now  let s say you set 3 event handlers for the  lt td gt  element  then if you do event stopPropagation   in the first event handler you set for  lt td gt   then all event handlers for  lt td gt  will still run  but the event just won t propagate to  lt tr gt  or  lt table gt   and won t go up and up to  lt body gt    lt html gt   document  and window    Now  however  if you use event stopImmediatePropagation   in your first event handler  then  the other two event handlers for  lt td gt  WILL NOT run  and won t propagate up to  lt tr gt    lt table gt   and won t go up and up to  lt body gt    lt html gt   document  and window    Note that it is not just for  lt td gt    For other elements  it will follow the same principle

User · Answer

A small example to demonstrate how both these propagation stoppages work     x000D   x000D  var state     x000D    stopPropagation  false  x000D    stopImmediatePropagation  false x000D     x000D   x000D  function handlePropagation event    x000D    if  state stopPropagation    x000D      event stopPropagation    x000D      x000D   x000D    if  state stopImmediatePropagation    x000D      event stopImmediatePropagation    x000D      x000D    x000D   x000D      child   click function e    x000D    handlePropagation e   x000D    console log  First event handler on  child    x000D      x000D   x000D   x000D      child   click function e    x000D    handlePropagation e   x000D    console log  Second event handler on  child    x000D      x000D   x000D     First this event will fire on the child element  then propogate up and x000D     fire for the parent element  x000D     div   click function e    x000D    handlePropagation e   x000D    console log  Event handler on div       this id   x000D      x000D   x000D   x000D     Enable disable propogation x000D     button   click function     x000D    var objectId   this id  x000D      this  toggleClass  active    x000D    state objectId      this  hasClass  active    x000D    console log  ---------------------    x000D      x000D  div   x000D    padding  1em  x000D    x000D   x000D   parent   x000D    background-color   CCC  x000D    x000D   x000D   child   x000D    background-color   000  x000D    padding  5em  x000D    x000D   x000D  button   x000D    padding  1em  x000D    font-size  1em  x000D    x000D   x000D   active   x000D    background-color  green  x000D    color  white  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  parent  gt  x000D     lt div id  child  gt  amp nbsp  lt  div gt  x000D   lt  div gt  x000D   x000D   lt button id  stopPropagation  gt Stop Propogation lt  button gt  x000D   lt button id  stopImmediatePropagation    gt Stop Immediate Propogation lt  button gt  x000D   x000D   x000D    There are three event handlers bound  If we don   t stop any propagation  then there should be four alerts - three on the child div  and one on the parent div   If we stop the event from propagating  then there will be 3 alerts  all on the inner child div   Since the event won   t propagate up the DOM hierarchy  the parent div won   t see it  and its handler won   t fire   If we stop propagation immediately  then there will only be 1 alert  Even though there are three event handlers attached to the inner child div  only 1 is executed and any further propagation is killed immediately  even within the same element

[javascript] stopPropagation vs. stopImmediatePropagation

Examples related to javascript

Examples related to jquery