When to use return false; and when preventDefault();

When to use return false; and when preventDefault();

When to use return false; and when preventDefault(); ? In this post I will try to explain what is the difference between return false; and preventDefault();. At the end of this post I’m pretty sure you will know the answer.

First, lets see what’s behind return false; and preventDefault(); when you call it.

 

return false;

return false; does 3 separate things when you call it :

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.

 

preventDefault();

preventDefault(); does one thing: It stops the browsers default behaviour.

 

When to use them?

We know what they do but when to use them? Simply it depends on what you want to accomplish. Use preventDefault(); if you want to “just” prevent the default browser behaviour. Use return false; when you want to prevent the default browser behaviour and prevent the event from propagating the DOM. In most situations where you would use return false; what you really want is preventDefault().