When to use PreventDefault() vs Return false in JavaScript ?
Last Updated :
06 May, 2025
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.
JavaScript preventDefault() Method:
This method stops the event if it is stoppable, meaning that the default action that belongs to the event will not occur. It just prevents 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 browser's 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 the boolean(true or false) value If a form field (fname) is empty, then the function alerts a message, and returns false, to prevent the form from being submitted.
- In order to avoid bubbling (which makes an event propagate from a child element to a parent element)developers have started to use return false statements 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
html
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>without PreventDefault() and return false</h2>
<div onclick='GeekParent()'>
<a href='#' onclick='GeekChild()'>
Click here
</a>
</div>
<br>
<br>
<script>
function GeekChild() {
alert('Link Clicked');
}
function GeekParent() {
alert('div Clicked');
}
</script>
</body>
Output:
Explanation: The link performs its default action as no condition is mentioned to stop it.
Example 2: with PreventDefault()
html
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2> PreventDefault( ) </h2>
<div onclick='GeekParent()'>
<a href='https://www.geeksforgeeks.org/community/'
onclick='GeekChild()'>
Click here to visit GeeksforGeeks.com
</a>
</div>
<br>
<br>
<script>
function GeekChild() {
event.preventDefault();
event.currentTarget.innerHTML = 'Click event prevented'
alert('Link Clicked');
}
function GeekParent() {
alert('div Clicked');
}
</script>
</body>
Output:
Explanation: In the output, the default function of the link i.e. connecting to another website has been stopped. Instead, an alert is shown using the preventDefault method.
Example 3: with Return false depending upon boolean (true or false)
html
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<body style="text-align:center;">
<h2>Form must be filled</h2>
<h5>otherwise return false stop event</h5>
<form name="myForm"
onsubmit="return validateForm()"
method="post">
Name:
<input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</body>
Output:
PreventDefault()Explanation: Since the button is pressed without filling the input field an alert appears because of the condition set in <script> tag which prevents default submit button action and returns false.
Similar Reads
When and why to 'return false' in JavaScript? Return statements, in programming languages, are used to skip the currently executing function and return to the caller function. Return statements may/may not return any value. Below is the example of a return statement in JavaScript. Example 1: javascript // The return statement returns // the pro
2 min read
How to Prevent XSS Attacks in JavaScript? Cross-site scripting (XSS) is a security vulnerability that enables attackers to inject malicious scripts into web pages viewed by users, potentially leading to serious consequences such as data theft and unauthorized actions. Given that JavaScript is a fundamental technology in web development, it
4 min read
When to use Vanilla JavaScript vs jQuery ? Earlier, the websites used to be static. However, the introduction of vanilla JavaScript revolutionized the way websites used to look and function. Vanilla JS helped the developers in creating dynamic websites. Then came jQuery, a library of tools created by developers around the world, using Javasc
4 min read
JavaScript Handler preventExtensions() Method JavaScript handler.preventExtensions() method in JavaScript is a trap for Object.preventExtensions() method. New properties cannot be added to an object when extensions are disabled. It returns a boolean value. Syntax: const p = new Proxy(target, { preventExtensions: function(target) { } }); Paramet
2 min read
Reject Vs Throw Promises in JavaScript This article covers the use of reject and throw premises in Javascript and explains it's differences.reject(): It is an inbuilt function in Javascript that returns a Promise object which has been rejected for a particular given reason. Syntax: Promise.reject(reason) Examples: The reason can be a sim
5 min read
Difference between preventDefault() and stopPropagation() methods in JavaScript In this article, we will be discussing the PreventDefault & stopPropagation methods with suitable code examples for each condition & then we will see the difference between the PreventDefault vs stopPropagation. JavaScript preventDefault() Method: It is a method present in the event interfac
3 min read
What is void and when to use void type in JavaScript ? In this article, we will know what is void operator in Javascript, along with discussing the particular condition where void operator can be used & understanding their implementation through the examples. The void keyword in JavaScript, is used to evaluate an expression which does not return any
5 min read
How to prevent the Common Vulnerabilities in JavaScript ? In this article, we will see the Preventing Common Vulnerabilities in JavaScript. Before we proceed, we will first understand the list of most common Vulnerability attacks, & then will understand the various approaches to resolve those Vulnerability attacks. Finally, we will understand the conce
4 min read
Promise vs Callback in JavaScript In JavaScript, managing asynchronous operations is a key aspect of modern web development. Two popular approaches for handling these operations are Promises and Callbacks. While both techniques are designed to deal with tasks that take time to complete (like fetching data from a server), they work d
5 min read
JavaScript - Prevent Users From Submitting a Form by Hitting Enter We can use Onkeydown event attribute for Prevent Users From Submitting a Form by Hitting Enter in JavaScript. It will prevent the submission of form directly. 1. Using the 'Onkeydown' Event attributeThe onkeydown event attribute is an HTML attribute that is used to specify the behavior of a web page
2 min read