This post will help you to differentiate between javascript’s return false, preventDefault, stopPropagation and stopImmediatePropagation.

The first thing you learn when using javascript is to use return false. That’s the best thing we think to cancel browser’s default behavior, to stop further execution of an event. If you are using a simple function which returns what you want, then probably you won’t notice anything wrong in using return false. But when you want event to propagate, return false will not be helpful and will give unexpected result.

What is event propagation?

When a single event, such as a mouse click, if is handled by two or more event handlers defined in various location of the DOM hiearachy, then the event handling starts by executing for individual elements at the lowest level. There are two models of this event propagation, event bubbling and event capturing.

Event bubbling is when an event has more than one event handler and event handling execution starts from bottom to top i.e. from individual links to it’s parent element (e.g. form or body or document) having it’s own event handler.

<form onclick="2ndEvent()"> [  
 This is a link!  
 ](#)  
 </form>   

On clicking on the link in the above example code, first the hyperlink’s event will be handled, then form’s event will get handled, and at last body’s event will get handled. This is event bubbling, which bubble up from bottom to top.

Event capturing is opposite to event bubbling, where event handling execution starts from top to bottom.

If you have such type of architecture, where there are many event handlers for an event, you should not use return false or atleast use it with caution. It can get you in big trouble, as it does preventDefault() and stopPropagation() both and hence never allows further execution of an event.

preventDefault()

It simply stops the default action of an element. Example, prevents the hyperlink from following the URL, prevents the submit button to submit the form. When you have many event handlers and you just want to prevent default event from occuring, just use e.preventDefault() in the top of the function definition. The reason we put preventDefault() in the first line of function is because, if something goes wrong in the code following the preventDefault(), then also it will not allow link or form to get submitted or do whatever action you want it to do. And hence the link or submit button will get submitted. It will still allow further propagation of the event.

Following example prevents the link from following the URL given in href attribute.

<div> [Blah](http://ka.lpe.sh/) </div> <script type="text/javascript">
      $("div a").click(function(e){
  			e.preventDefault();
			});
     </script>  
   

stopPropagation()

<div onclick="doSomething()"> [Blah](#) </div>   

$(“div a”).click(function (e) {  
 alert(‘Link is clicked! Sorry div will not get clicked..’);  
 e.stopPropagation();  
});

stopImmediatePropagation()

If you have multiple event handlers for the event, and you want to stop all other event handlers and current event also from further executing, you should use stopImmediatePropagation().

<div> [Blah](#) </div> <script type="text/javascript">
      $("div a").click(function () {
         alert('Hello!');
      });</script>

 $("div a").click(function (e) { alert('Hi! You can see me'); e.stopImmediatePropagation(); });

 $("div a").click(function () { alert('I will never popup :('); });   
   

So next time when you use return false, think twice do you really want return false or e.preventDefault() or other methods explained above will well-suited there.