When to use PreventDefault( ) vs Return false in JavaScript?

07 Aug, 2019
In Javascript, there are two methods- preventDefault() and Return false, that are used to stop default browser behaviour but their functionalities and uses are little different. This article shows how these two are different?
preventDefault()
This method stops the event if it is stopable, meaning that the default action that belongs to the event will not occur. It just prevent the default browser behaviour. Developers use preventDefault() in many cases For example,
When clicking on a link, prevent the link from following the URL
When clicking on a checkbox, prevent Toggling a checkbox
When clicking on a “Submit” button, prevent it from submitting a form
Return false
Return false follow three steps
First It stops the browsers default behaviour.
It prevents the event from propagating the DOM
Stops callback execution and returns immediately when called.
Developers use the return false in many different cases.For example,
Depending upon boolean(true or false) value If a form field (fname) is empty, then function alerts a message, and returns false, to prevent the form from being submitted.
In order to avoid bubbling (which makes an event to propagate from child element to a parent element)developers have started to use return false statement to stop such propagation.
Note: This behaviour differs from normal (non-jQuery) event handlers, in which, notably, return false does not stop the event from bubbling up. Returning false from a regular DOM event handler does absolutely nothing.
Below are some examples to demonstrate the above:
Example 1: Behaviour without PreventDefault( ) and Return false
<!DOCTYPE html><html>  <head>    <title>        without PreventDefault( ) or Return false    </title>    <script>        function GeekChild() {            alert('Link Clicked');        }          function GeekParent() {            alert('div Clicked');        }    </script></head>  <body style="text-align:center;">      <h1 style="color:green;">                  GeeksForGeeks              </h1>      <h2> PreventDefault( ) </h2>    <div onclick='GeekParent()'>        <a href='https://ide.geeksforgeeks.org'            onclick='GeekChild()'>Click here to visit GeeksforGeeks.com</a>    </div>    <br>    <br></body>  </html>
Output:
Before clicking on link
After clicking on link
After clicking againLink will open as a default behaviour of browser.
Example2: with PreventDefault()
<!DOCTYPE html><html>  <head>    <title>        without PreventDefault( )    </title>    <script>        function GeekChild() {            event.preventDefault();            event.currentTarget.innerHTML = 'Click event prevented'            alert('Link Clicked');        }          function GeekParent() {            alert('div Clicked');        }    </script></head>  <body style="text-align:center;">      <h1 style="color:green;">                  GeeksForGeeks              </h1>      <h2> PreventDefault( ) </h2>    <div onclick='GeekParent()'>        <a href='https://ide.geeksforgeeks.org'            onclick='GeekChild()'>Click here to visit GeeksforGeeks.com</a>    </div>    <br>    <br></body>  </html>
Output:
Before clicking on link
After clicking on link
After clicking again
PreventDefault( ) changes default behaviour
Example 3: with preventDefault()
<!DOCTYPE html><html>  <body style="text-align:center;">      <h1 style="color:green;">              GeeksForGeeks          </h1> Try to check this box:    <input type="checkbox" id="myCheckbox">      <p>Toggling a checkbox is the default action      of clicking on a checkbox. The preventDefault()       method prevents this from happening.</p>      <script>        document.getElementById("myCheckbox")            .addEventListener("click", function(event) {                event.preventDefault()            });    </script>  </body>  </html>
Output:
preventDefault() stops toggling of checkbox.
Example 4: with Return false depending upon boolean (true or false)
<!DOCTYPE html><html>  <head>    <title>        Return false    </title>    <script>        function validateForm() {            var x = document.forms["myForm"]["fname"].value;            if (x == "") {                alert("Name must be filled out");                return false;            }        }    </script></head>  <body style="text-align:center;">      <h1 style="color:green;">              GeeksForGeeks          </h1><!DOCTYPE html><html>  <head>    <title>        Return false    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>  <body style="text-align:center;">      <h1 style="color:green;">              GeeksForGeeks         </h1>      <h2> PreventDefault( ) </h2>      <div>        <a href='https://ide.geeksforgeeks.org'>Click here to visit geeksforgeeks.com</a>    </div>    <script>        $('a').click(function(event) {            alert('Link Clicked');            $('a').text('Click event prevented using return FALSE');            $('a').contents().unwrap();            return false;        });        $('div').click(function(event) {            alert('Div clicked');        });    </script>    <br>    <br></body>  </html>      <h2>Form must be filled</h2>    <h5>otherwise return false stop event</h5>    <form name="myForm" action="/action_page.php"           onsubmit="return validateForm()"           method="post">        Name:        <input type="text" name="fname">        <input type="submit" value="Submit">    </form>  </body>  </html>
Output:
After click on submit without submitting value return false stops the event
Example 5: with Return false
<!DOCTYPE html><html>  <head>    <title>        Return false    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>  <body style="text-align:center;">      <h1 style="color:green;">              GeeksForGeeks         </h1>      <h2> PreventDefault( ) </h2>      <div>        <a href='https://ide.geeksforgeeks.org'>Click here to visit geeksforgeeks.com</a>    </div>    <script>        $('a').click(function(event) {            alert('Link Clicked');            $('a').text('Click event prevented using return FALSE');            $('a').contents().unwrap();            return false;        });        $('div').click(function(event) {            alert('Div clicked');        });    </script>    <br>    <br></body>  </html>
Output:
Before clicking on link
After clicking on link
Return false stops the event from propagating through the DOM.
DominusProvidebit
javascript-basics
javascript-functions
Picked
JavaScript
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.