Summary: In this tutorial, you will learn the difference between the event.preventDefault() and return false statement in Javascript.
Difference between event.preventDefault() and return false
In JavaScript, event.preventDefault() is a method that cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.
For example, if you have a form with a submit button, and you want to prevent the form from being submitted when the button is clicked, you can use preventDefault() on the click event of the button.
document.querySelector('form').addEventListener('submit', event => {
event.preventDefault();
// do something else instead of submitting the form
});
On the other hand, return false is a way to stop the execution of a function that has been called. It is often used in event handlers to prevent the default action from occurring, similar to event.preventDefault().
Here’s an example of using return false in an event handler:
document.querySelector('form').addEventListener('submit', function(event) {
// do something
return false;
});
Note that return false not only stops the event from propagating and prevents the default action from occurring, but it also stops the execution of the function.
In general, event.preventDefault() is preferred over return false, because preventDefault() only affects the event that it is called on, while return false affects the whole function.
When to use event.preventDefault()?
When you want to prevent the default action of an event from occurring. For example, if you have a form with a submit button, and you want to prevent the form from being submitted when the button is clicked, you can use event.preventDefault() on the click event of the button.
When you want to stop the event from propagating to parent elements, but you want to allow the function to continue executing. For example, if you have a list with nested elements, and you want to handle the click event on the list item, but you don’t want the event to propagate to the list itself, you can use event.stopPropagation() in combination with event.preventDefault().
document.querySelector('li').addEventListener('click', event => {
event.stopPropagation();
event.preventDefault();
// handle the click event on the list item
});
When to use return false?
When you want to stop the execution of a function. For example, if you want to exit a function early if a certain condition is met, you can use return false.
function doSomething(event) {
if (event.target.tagName === 'A') {
// exit the function early if the event target is an anchor element
return false;
}
// do something else
}
When you want to both stop the event from propagating and prevent the default action from occurring, and you also want to stop the execution of the function. In this case, you can use return false as a shorthand for calling both event.stopPropagation() and event.preventDefault().
However, as mentioned earlier, it is generally recommended to use event.preventDefault() and event.stopPropagation() separately, because return false affects the whole function and can make the code harder to understand.
