What's the effect of adding 'return false' to a click event listener?

javascript

event-propagation

default-behavior

preventdefault

byAlex Kataev·Mar 12, 2025

Deploying return false; inside a click event listener both quashes the default action — like a hyperlink's redirect — and nullifies the event from rippling up to ancestor elements, barricading them from reacting to the same click event.

Example:

document.querySelector('a').addEventListener('click', function(event) {
    // Projects, like popping up a modal, go here
    // Just like "cancel" button on your work on Fridays
    
    return false; // Stops link navigation and parent click responses
});

In layman's terms, return false; revokes a link's conventional behavior and muzzles click handlers higher up the DOM.

Breaking down Event Propagation and Default Behavior

When an event sparks in the DOM, two primary steps pitch in: bubbling or capturing and launching the default reaction. Adding return false; in event listeners plays a noteworthy role by interrupting both these paths.

In the instance of bubbling, the event originates from the target element and moves outward to its ancestors. The event's 'life of the party' ends when return false; makes a dramatic entry.

When talking about default actions, these could be anything ranging from navigating to a link to submitting a form. return false; stops these actions right in their tracks, allowing for custom behavior or validations before permitting the default action.

The modern 'preventDefault' sensation

The moderndevelopment of JavaScript has created an affinity towards event.preventDefault() instead of return false;. It's a method that's explicit in its intent, only stopping the default action without affecting the event propagation, granting you total control over the event handling, like a maestro leading an orchestra.

document.querySelector('a').addEventListener('click', function(event) {
    // Only prevents from imitating Sherlock Holmes (link redirection)
    event.preventDefault();
});

Swinging between different browsers

Understanding the intricacies of return false; isn't just important, but essential when developing websites or applications that aim to run smoothly across various browsers.

Although these older approaches may appear to provide the correct output, they often conceal potential issues hidden beneath the surface. It's advisable to be updated with modern APIs like event.preventDefault() and event.stopPropagation(), which have been recognized as standard practices in the development community.

Treading towards accessibility

An essential cog in the wheel of development is ensuring your website or application remains functional without JavaScript. Remember, users with JavaScript disabled will experience the default actions. Therefore, return false; would have no effect.

When to steer towards `return false;` or `preventDefault`

Pondering over which one to use? Take a look at these real-life examples before making a decision:

Anchor Tags: Halt users from storming off to a new link until a condition or validation is satisfied by using return false;.
Form Submission: Put a speed breaker on form submissions by utilizing return false; in an onsubmit event to ensure checks run their course.
Button Elements: Pausing certain default behaviors in button elements might not be the norm, but return false; can be still used if the need arises.

Anticipatory Actions and Customization

Another facet where 'return false' adds a sprinkle of magic is by easing user actions to be confirmed before they proceed. Applying 'return false' correctly forms an impeccable pillar in building a user-friendly environment.

Consider this scenario: A user attempts to navigate away from an online form fill-up page. A pop-up appears asking, "Are you sure you want to leave without saving?" Here, 'return false;' prevents further action, allowing the user to pause and review their action.

Here's a table summarizing how these methods impact default behavior and event bubbling:

|=-=-=-=-===========-=|:-----------------------=:=-----------------------:| | Method | Default Action Prevented | Event Bubbling Prevented| | return false | Yes | Yes | | event.preventDefault() | Yes | No | | event.stopPropagation() | No | Yes | |=====================||======================|

Now, it's time to choose your path wisely!

explain-codes / Javascript / What's the effect of adding 'return false' to a click event listener?

Linked

Event.preventdefault() vs. return false



Access event to call preventdefault from custom function originating from onclick attribute of tag



What's the difference between event.stopPropagation and event.preventDefault?



How to get the onclick calling object?



How can I disable HREF if onclick is executed?