Introduction

event.preventDefault() and return false are sometimes treated as interchangeable, but they are not. What return false does depends on whether you are using an inline handler, native DOM listeners, or a library such as jQuery.

What preventDefault() Actually Does

event.preventDefault() stops the browser's default action for the event. It does not stop propagation on its own.

1<a id="link" href="https://example.com">Open</a>
2<script>
3  document.getElementById("link").addEventListener("click", function (event) {
4    event.preventDefault();
5    console.log("navigation prevented");
6  });
7</script>

In that example, the link does not navigate, but the click event can still bubble to parent elements unless you also call stopPropagation().

Native DOM: return false Is Not a Replacement

In a modern addEventListener callback, returning false does not cancel the event.

1<a id="bad-link" href="https://example.com">Open</a>
2<script>
3  document.getElementById("bad-link").addEventListener("click", function () {
4    return false;
5  });
6</script>

That handler returns false to JavaScript, but the DOM event system ignores the return value. The browser still performs the default action.

This is the biggest source of confusion. Developers often remember older inline-handler behavior and assume it applies everywhere.

Inline Handlers Behave Differently

Inline event attributes are a special case.

<a href="https://example.com" onclick="return false;">Open</a>

Here, return false prevents the default action because the browser treats the inline handler's return value specially.

That is legacy behavior, not a general rule for all JavaScript event handling styles.

jQuery Is Another Special Case

If you are using jQuery, return false inside a jQuery event handler is shorthand for two actions together:

• prevent the default action
• stop propagation

1<button id="save">Save</button>
2<script>
3  $("#save").on("click", function () {
4    return false;
5  });
6</script>

That is a jQuery convention, not native DOM behavior. Mixing those mental models is how bugs happen when code moves from jQuery to plain JavaScript.

Be Explicit in Modern Code

In modern JavaScript, the clearest approach is to say exactly what you want.

1button.addEventListener("click", function (event) {
2  event.preventDefault();
3  event.stopPropagation();
4});

This is better than return false because:

• the intent is obvious to the next reader
• it works consistently in native listeners
• you can choose whether to stop propagation separately from preventing default behavior

Those are two different decisions, and return false often hides that distinction.

When You Need Both Actions

Use these rules:

• only stop the browser action: call preventDefault()
• only stop bubbling: call stopPropagation()
• need both: call both explicitly

That makes event handling predictable, especially in large component trees where one handler may be relying on bubbling for analytics, accessibility, or other UI coordination.

Common Pitfalls

The biggest mistake is expecting return false inside addEventListener to cancel the event. It does not.

Another mistake is using preventDefault() when the real bug is event bubbling. If a parent click handler still fires, the missing call is stopPropagation(), not another preventDefault().

A third issue is porting jQuery code to vanilla JavaScript without updating the event logic. return false changes meaning across those environments.

Finally, inline event handlers still work, but they are harder to maintain and test than explicit listeners defined in JavaScript.

Another subtle issue is passive event listeners on touch and wheel events. In those cases, calling preventDefault() may be ignored unless the listener was registered with the right options.

Summary

• 'event.preventDefault() stops the browser's default action.'
• In native DOM listeners, return false does not cancel the event.
• In inline handlers, return false prevents the default action.
• In jQuery handlers, return false prevents default and stops propagation.
• Modern JavaScript should use explicit event methods instead of relying on return false.
• Treat default behavior and propagation as separate concerns.