Difference Between e.preventDefault () And Return False

In this tutorial we are going to discuss the difference between e.preventDefault () and return false as lot of people doesn’t know the difference between them.

e.preventDefault ():- Prevents the default action of event from happening/triggering but do not stop the propagation of event to parent elements.

return false :- Prevents the default action of event from happening/triggering as well as stop the event propagation.

Now the question arise in everyone's mind is what is event propagation? I will explain it in my next tutorial very soon.

Ok, let's try to understand e.preventDefault() and return false with the help of examples.

Example 1:-

This is a simple example.Let's suppose we have a div and there is an anchor tag inside it like this.

<div id="someID" onclick="executeParentFunction()">
        <a href="http://aspsqltutorials.blogspot.com">Click here to visit my blog</a>
 </div> 

And script tag like this:

<script type="text/javascript">

 $("a").click(function (e) {

 $("a").text("Click Event is going to happen");  // this line will change the hyperlink text

  });

  function executeParentFunction() {

            alert("First Comes Here");
        }
    </script>

Now when we execute above code and click on the anchor tag link first we will get alert("First Comes Here") as the parent div calls function executeParentFunction() then after that we will see that hyperlink text "Click here to visit my blog" will be replaced by text "Click Event is going to happen" and then you will be redirected to my blog.

Example 2:-

This is a simple example. Let's suppose we have a div and there is an anchor tag inside it like this.

<div id="someID" onclick="executeParentFunction()">
        <a href="http://aspsqltutorials.blogspot.com">Click here to visit my blog</a>
 </div> 

And script tag like this:

<script type="text/javascript">

       $("a").click(function(e){         
              e.preventDefault();         // this line prevents the default action       
              $("a").text("Click Event is going to happen");  // this line will change the hyperlink text
       });

       function executeParentFunction(){
              
              alert("First Comes Here");
       
       }
    </script>

so when we execute example 2 we will first get the javascript alert("First Comes Here") as usual after that hyperlink text "Click here to visit my blog" will be replaced by text "Click Event is going to happen" but you will not redirected to my blog in this case because we use e.preventDefault to stop the default click action to be triggerd.

Example 3:-

In this example we use return false, after executing this final example you will surely know the difference.

<div id="someID" onclick="executeParentFunction()">
        <a href="http://aspsqltutorials.blogspot.com">Click here to visit my blog</a>
 </div> 

<script type="text/javascript">

       $("a").click(function (e) {

           $("a").text("Click Event is going to happen");  // this line will change the hyperlink text
           return false;
       });

       function executeParentFunction() {

           alert("First Comes Here");

       }

</script>

Here when we will execute the code of example 3 and we'll see that function excuteParentFunction () will not be called and we will not get any alert (). This is because we use return false here which stop the default action from happening as well as the event propagation. Also this time hyperlink text "Click here to visit my blog" will be replaced by text "Click Event is going to happen" but you will not be redirected to my blog.

Try and execute these examples to see the difference and how they work.

Hope this post will be helpful for you.