MENU


Stopping Event Propagation

By default, an event is 'bubbled' to the ancestor elements. That can be stopped by calling event.stopPropagation().

event.stopImmediatePropagation() stops the propagation to the other event handlers for the event on the element as well.

Notice that you can attach multiple event handlers to an event on an element.
RESETRUNFULL
<!DOCTYPE html><html><body>
   <div onclick="alert(3)">
      <button>1...2</button>
      <button>1</button>
   </div>
   <script>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);})
   </script></body></html>