event.preventDefault() vs return false in JavaScript and jQuery

By the end of this page, you will understand what event.preventDefault() actually does, what return false means in jQuery versus plain JavaScript, and why they are not always equivalent. You will also learn how default browser actions and event propagation are separate concepts, and which approach is usually clearer and safer in real code.

In event-driven programming, two different things can happen when an event occurs:

• The browser may perform a default action.
  • Example: clicking a link navigates to a new page.
  • Example: submitting a form sends data and reloads the page.
• The event may propagate through the DOM.
  • It can travel through parent elements and trigger other handlers.

These are separate behaviors.

event.preventDefault()

event.preventDefault() stops the browser's default action for that event.

Examples:

• Prevent a link from navigating
• Prevent a form from submitting
• Prevent a checkbox from toggling in some cases

It does not stop the event from bubbling to parent elements.

$('a').on('click', function (e) {
    e.preventDefault();
    console.log('The link will not open, but bubbling can still happen.');
});

return false in jQuery

In a jQuery event handler, return false is a shortcut that does two things:

• calls event.preventDefault()
• calls event.stopPropagation()

So in jQuery, return false is stronger than only calling preventDefault().

$('a').on('click', function () {
    return false;
});

That means:

• the browser default action is prevented
• the event will not bubble up to parent handlers

return false in plain JavaScript

In plain DOM event listeners added with addEventListener, return false does not do what many beginners expect.

document.querySelector('a').addEventListener('click', function () {
    return false; // does not stop default action or propagation here
});

In modern plain JavaScript, you should use explicit event methods:

• event.preventDefault()
• event.stopPropagation()
• event.stopImmediatePropagation() when needed

Why this matters

Using the correct tool makes your intent clear:

• Want to stop navigation only? Use preventDefault().
• Want to stop bubbling too? Use stopPropagation().
• Want both? Call both explicitly.

This is usually easier to read and maintain than relying on a shorthand whose behavior changes between jQuery and plain JavaScript.

Think of an event like someone ringing a doorbell in an apartment building.

• Default action is what normally happens after the bell is rung.
  • For a link, the browser "opens the door" and navigates.
• Propagation is the sound traveling through the building.
  • Parent elements also "hear" the event.

Now imagine your code can respond in different ways:

• preventDefault() means: do not perform the normal action.
  • The bell rang, but nobody opens the door.
• stopPropagation() means: do not let the sound travel to other apartments.
  • Only this handler reacts.
• return false in jQuery means: don't open the door, and don't let anyone else hear the bell.

That is why preventDefault() and return false are not the same thing.

Core syntax

Prevent only the browser default action

$('form').on('submit', function (e) {
    e.preventDefault();
    console.log('Form submission prevented');
});

Prevent default action and stop bubbling explicitly

$('form').on('submit', function (e) {
    e.preventDefault();
    e.stopPropagation();
    console.log('Form submission prevented and event stopped');
});

jQuery shorthand using return false

$('form').on('submit', function () {
    console.log('jQuery will prevent default and stop propagation');
    return false;
});

Example: link click

$('a').on('click', function (e) {
    e.preventDefault();
    console.log('Stay on the same page');
});

This prevents the browser from following the link, but parent click handlers can still run.

Example: link click with bubbling stopped

$('.card').on('click', function () {
    console.log('Card clicked');
});

$('a').on('click', function (e) {
    e.preventDefault();
    e.stopPropagation();
    console.log('Link clicked, but card handler will not run');
});

Plain JavaScript version

document.querySelector('a').addEventListener('click', function (e) {
    e.preventDefault();
    console.log('Default action prevented');
});

Important note

document.querySelector('a').addEventListener('click', function () {
    return false;
});

In modern plain JavaScript, this does not prevent navigation by itself.

Consider this HTML:

<div id="box">
    <a id="link" href="https://example.com">Open</a>
</div>

And this jQuery:

$('#box').on('click', function () {
    console.log('box clicked');
});

$('#link').on('click', function (e) {
    e.preventDefault();
    console.log('link clicked');
});

What happens when the link is clicked?

1. The click starts on #link.
2. The link handler runs.
3. e.preventDefault() stops the browser from navigating to https://example.com.
4. console.log('link clicked') runs.
5. The event still bubbles upward.
6. The #box click handler also runs.
7. Output is:

link clicked
box clicked

Now change the link handler:

$('#link').on('click', function () {
    console.log('link clicked');
    return false;
});

What happens now in jQuery?

1. The click starts on #link.
2. The link handler runs.
3. console.log('link clicked') runs.
4. return false tells jQuery to:
   • prevent the default action
   • stop propagation
5. The browser does not navigate.
6. The event does not reach #box.
7. Output is:

link clicked

This trace shows the practical difference very clearly: preventDefault() affects the browser action, while jQuery return false affects both browser action and bubbling.

Preventing form submission for validation

$('form').on('submit', function (e) {
    if (!$('#email').val()) {
        e.preventDefault();
        alert('Email is required');
    }
});

Use this when you want to keep the user on the page if validation fails.

AJAX links or buttons

$('a.load-profile').on('click', function (e) {
    e.preventDefault();
    loadProfile();
});

The link looks like a normal link, but JavaScript handles it without page navigation.

Nested clickable UI elements

$('.card').on('click', function () {
    openCard();
});

$('.card .delete-btn').on('click', function (e) {
    e.stopPropagation();
    deleteItem();
});

Here, a delete button inside a clickable card should not also trigger the card click.

Dropdowns, modals, and menus

Developers often prevent default actions and control propagation carefully so clicks inside a component do not trigger outer handlers unexpectedly.

Single-page applications

Frameworks and client-side routing often prevent default link behavior and replace it with in-app navigation logic.

In real projects, developers usually prefer explicit event control over shorthand.

Common pattern: prevent only what you mean

$('a.external-action').on('click', function (e) {
    e.preventDefault();
    trackClick();
    openModal();
});

This is clear: the code only prevents navigation.

Common pattern: guard clause in form handling

$('form').on('submit', function (e) {
    if (!isFormValid()) {
        e.preventDefault();
        showErrors();
        return;
    }

    saveDraft();
});

This style is readable because the reason for stopping the default action is obvious.

Common pattern: explicit propagation control

$('.menu').on('click', function (e) {
    e.stopPropagation();
});

$(document).on('click', function () {
    closeMenu();
});

This is common in dropdowns and popovers.

Why teams often avoid return false

• It hides multiple effects in one line.
• Its meaning differs between jQuery and plain JavaScript.
• It can make debugging harder because propagation stops implicitly.
• Explicit method calls communicate intent better.

In modern codebases, you will usually see:

• e.preventDefault() when stopping only the default action
• e.stopPropagation() when stopping bubbling
• both methods together when both behaviors are desired

Mistake 1: Thinking preventDefault() stops propagation

Broken assumption:

$('.parent').on('click', function () {
    console.log('parent clicked');
});

$('.child-link').on('click', function (e) {
    e.preventDefault();
    console.log('child clicked');
});

Beginners may expect the parent handler not to run. But it still runs because preventDefault() does not stop bubbling.

Fix:

$('.child-link').on('click', function (e) {
    e.preventDefault();
    e.stopPropagation();
    console.log('child clicked');
});

Mistake 2: Thinking return false works the same everywhere

Broken code:

document.querySelector('a').addEventListener('click', function () {
    return false;
});

This does not reliably prevent the browser default action in modern DOM listeners.

Fix:

document.querySelector('a').addEventListener('click', function (e) {
    e.preventDefault();
});

Mistake 3: Using return false when you only wanted to prevent navigation

$('a').on('click', function () {
    return false;
});

This may unintentionally block parent handlers that should still run.

Better:

$('a').on('click', function (e) {
    e.preventDefault();
});

Mistake 4: Forgetting the event parameter

Broken code:

$('form').on('submit', function () {
    e.preventDefault();
});

e is undefined because it was never declared.

Fix:

$('form').on('submit', function (e) {
    e.preventDefault();
});

Mistake 5: Confusing stopPropagation() with stopImmediatePropagation()

• stopPropagation() stops the event from moving to parent elements.
• stopImmediatePropagation() also stops other handlers on the same element.

Use the stronger one only when truly necessary.

preventDefault() vs return false

• Use preventDefault() when you want to clearly stop the browser's normal behavior.
• Use return false only if you specifically want jQuery's combined shortcut and your team accepts that style.
• In modern code, explicit methods are usually preferred.

jQuery vs plain JavaScript

Quick rules

• event.preventDefault() = stop the browser's default action
• event.stopPropagation() = stop the event from bubbling upward
• return false in jQuery = both of the above
• return false in plain addEventListener = not a reliable replacement

Common patterns

Stop link navigation

$('a').on('click', function (e) {
    e.preventDefault();
});

Stop parent click handlers too

$('a').on('click', function (e) {
    e.preventDefault();
    e.stopPropagation();
});

jQuery shorthand

$('a').on('click', function () {
    return false;
});

Best practice

Prefer explicit code:

$('a').on('click', function (e) {
    e.preventDefault();
    // optionally:
    // e.stopPropagation();
});

Edge cases

• preventDefault() does not stop parent handlers.
• stopPropagation() does not stop default browser actions.
• stopImmediatePropagation() also blocks other handlers on the same element.
• return false means different things in different event systems.

Is event.preventDefault() the same as return false?

No. In jQuery, return false prevents the default action and stops propagation. event.preventDefault() only stops the default action.

Should I use return false in jQuery?

You can, but explicit methods are usually clearer. Most modern code prefers e.preventDefault() and e.stopPropagation() only when needed.

Why does return false not work in addEventListener?

Because modern DOM event listeners do not treat a returned false as special. You must call event methods directly.

Does preventDefault() stop other click handlers?

No. It only stops the default browser behavior. Other handlers may still run unless you also stop propagation.

When should I use stopPropagation()?

Use it when an event should not bubble to parent elements, such as clicks inside dropdowns, cards, modals, or nested buttons.

What is stopImmediatePropagation() used for?

It stops propagation and also prevents other handlers on the same element from running. Use it carefully.

Which approach is better in real projects?

Usually, explicit event methods are better because they show exactly what the code is doing and avoid confusion across different JavaScript styles and libraries.

• Event bubbling — closely related because propagation explains why parent handlers may still run.
• Event capturing — another phase of DOM events that helps build a complete mental model.
• stopPropagation() — often paired with preventDefault() when you need to block bubbling.
• stopImmediatePropagation() — useful when multiple handlers exist on the same element.
• DOM event object — understanding the event object is necessary for using event methods correctly.
• jQuery event handling — relevant because return false has special behavior in jQuery.
• Form submission handling — a common place where preventDefault() is used.
• Link click interception — another common use case for preventing default browser behavior.