event.preventDefault() vs return false in JavaScript

When working with event handling in JavaScript, you will definitely use event.preventDefault() and return false. Both of these can be used to prevent certain default behaviours, like stopping a form submission or preventing a link from navigating. event.preventDefault() and return false are not the same and work differently depending on the context. In this blog, you will explore all the information about the event.preventDefault(), and return false. Also, learn about best practices regarding these methods.

Table of Contents

• event.preventDefault()
• return false
  • Example 1: Using Inline Event Handlers
  • Example 2: Same Example Using Event Listener
• Key Differences
• Using event.preventDefault() & event.stopPropagation() Together
• Best Practices
• Conclusion

event.preventDefault()

event.preventDefault() is a method that explicitly prevents the default behavior of an event without stopping event bubbling (event on a child element moves to its parent elements) and event capturing (opposite to event bubbling). It ensures that the default behaviour of the event, such as navigating to a new page when clicking a link, is stopped.

event.preventDefault();

Example:

Output:

Explanation: In this example, event.preventDefault() prevents the default browser action but doesn’t stop the event from propagating to the parent element. Thus, when you click on the submit button, only logs are printed (Form Submission Prevented). The form submission is blocked.

return false

The return false works differently in different places. The behaviour of return false depends on where it is used in inline event handlers or in event listeners.

• In inline event handlers (onclick=”return false;”): It prevents the default action and stops event propagation (event bubbling and capturing).
• In event listeners (addEventListener): It doesn’t prevent default behaviour or stop propagation. 

Syntax:

return false;

Example 1: Using Inline Event Handlers

Output:

Explanation: In this example, you’re using return false to stop the default behavior of the browser. Whenever you click on the link (Intellipaat Courses), the browser doesn’t navigate you to a new page because the default behaviour is prevented.

Example 2: Same Example Using Event Listener

Output:

Explanation: When you are using the return false inside the eventListener, then return false has no effect. It still navigates you to the Intellipaat website.

Key Differences

Here are some important key differences between event.preventDefault() and return false:

Using event.preventDefault() & event.stopPropagation() Together

If you want to stop both, the default behaviour of your browser and the event propagation (event bubbling and capturing). Then, using the event.preventDefault() & event.stopPropagation() together is a great choice for you.

Syntax:

document.getElementById("myButton").addEventListener("click", function(event) {
    event.preventDefault();
    event.stopPropagation();
})

Explanation: The event.preventDefault() is used to stop the default behaviour, and event.stopPropagation() is used to stop the event bubbling and event capturing.

Best Practices

Here are some of the best practices that you have to take care of while using the event.preventDefault() and return false:

• Always use event.preventDefault() in modern JavaScript because it is a standard and efficient method to stop default actions of the browser.
• Avoid using return false inside event listeners.
• Use the event.stopPropagation() when you want to stop event bubbling rather than depending on return false.
• Avoid inline event handlers (onclick=”return false;”).

Conclusion

Understanding the difference between event.preventDefault() and return false is important for writing clean and efficient JavaScript code. If you are handling events in JavaScript, then always use the event.preventDefaut() over return false. because it’s a clear and standard approach to stop the default actions of browsers. By using these best practices, you can ensure that your event handling logic works as you write code.

event.preventDefault() vs return false in JavaScript – FAQs