Difference Between event.preventDefault(), event.stopPropagation() and return false

1. event.preventDefault() – It stops the browsers default behaviour.
2. event.stopPropagation() – It prevents the event from propagating (or “bubbling up”) the DOM.
3. Stops callback execution and returns immediately when called.

Note that this behaviour differs from normal (non-jQuery) event handlers, in which, notably, return false does not stop the event from bubbling up.

Example:- It's tested on W3School

<div onclick='executeParent()'>

  <a href='https://www.w3schools.com' onclick='executeChild()'>Click here to visit w3schools.com</a>

</div>

<script>

  function executeChild() {

   //event.preventDefault();  

   // event.stopPropagation();// stop event bubbling

    event.currentTarget.innerHTML = 'Click event prevented'

    alert('Link Clicked');

    if(event.currentTarget.innerHTML==='Click event prevented'){

    event.preventDefault(); // stop default behaviour of browser means href won't be call

    }

    //return false// it is used for exit from function/ callback at any where

  }

  function executeParent() {

    alert('Div Clicked');

  }

</script>