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

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Before clicking on link
  • After clicking on link
  • After clicking again


    Link will open as a default behaviour of browser.

Example2: with PreventDefault()

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Before clicking on link
  • After clicking on link
  • After clicking again
  • PreventDefault( ) changes default behaviour

Example 3: with preventDefault()

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

preventDefault() stops toggling of checkbox.

Example 4: with Return false depending upon boolean (true or false)

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
</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>

chevron_right


Output:

  • After click on submit without submitting value return false stops the event

Example 5: with Return false

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Return false
    </title>
</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>

chevron_right


Output:

  • Before clicking on link
  • After clicking on link
  • Return false stops the event from propagating through the DOM.


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : DominusProvidebit