event.preventDefault() vs return false: How Not to Break Your JavaScript

Introduction: Why Does This Topic Blow Up Stack Overflow?

If you've ever written a JavaScript click handler for a link or form submission, you've likely encountered a situation where the browser does something on its own, ignoring your logic. You write alert('Hello!') on a link click, but the browser stubbornly navigates to another page instead. Sound familiar?

This is where two legendary methods come into play: event.preventDefault() and return false. The question "Which one to choose?" is one of the most popular on Stack Overflow, with tens of thousands of views. And for good reason: the difference between them is critical, and the wrong choice can lead to hard-to-find bugs.

In this article, we'll settle this once and for all:

\n
• What is a "default action" in the browser
\n
• How both methods work
\n
• The main difference that has broken code for thousands of developers
\n
• When to use each one
\n
• Why return false isn't always evil
\n

Ready? Let's go!

1. What is a "Default Action"?

Before we talk about the methods, let's understand what we're actually canceling. The browser is a smart machine with built-in behavior for many HTML elements:

\n
• Link (<a>): by default, navigates to the URL in the href attribute.
\n
• Form (<form>): by default, sends data to the server and reloads the page.
\n
• Submit button (<input type="submit">): submits the form.
\n
• Context menu (right-click): shows the browser's menu.
\n

Sometimes we need this behavior — for example, when a user actually wants to follow a link. But often we want to intercept this action and execute our own logic: validate a form before submission, open a link in a modal window, show a custom context menu.

This is exactly what our heroes are for.

2. event.preventDefault() — The Gentleman's Method

This is a method of the event object (event). It does exactly one thing: cancels the browser's default action.

// Example 1: Preventing a link navigation\ndocument.querySelector('a').addEventListener('click', function(event) {\n    event.preventDefault();\n    alert('The link didn't work! I canceled it.');\n});\n\n// Example 2: Preventing a form submission\ndocument.querySelector('form').addEventListener('submit', function(event) {\n    event.preventDefault();\n    // Now the form won't reload the page\n    // You can make an AJAX request or validate\n    console.log('Form not submitted. Checking data...');\n});\n

Note: preventDefault() does not stop event bubbling. If you have nested handlers, the event will continue to "bubble" up the DOM tree.

This is important to understand: if you want to both cancel the action and stop propagation, you need to call both methods: preventDefault() and stopPropagation().

3. return false — An Old but Dangerous Friend

Now, return false is a trickier beast. It all depends on how exactly you attach the handler.

Case 1: HTML Attributes (onclick)

In ancient times (and still in legacy code), handlers were attached directly in HTML:

<a href="https://example.com" onclick="return false;">Click me</a>\n\n<form onsubmit="return validateForm();">\n    <input type="submit" value="Submit">\n</form>\n\n<script>\nfunction validateForm() {\n    // If you return false — the form won't submit\n    // If true — it will submit\n    return false;\n}\n</script>\n

In