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 :

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;
});

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.

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.();
    ();
});

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();
});

$().(,  () {
    ();
});

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

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',  () {
     ;
});

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?

• 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.