Preventing Default Browser Behaviors0%
Rendering Lists with the Array map Method

Preventing Default Browser Behaviors

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Preventing Default Browser Behaviors

1. What Are Default Browser Behaviors?

Web browsers come with extensive pre-programmed, default behaviors for various HTML elements:

  • Clicking an <a> link: Navigates the browser to the URL specified in the href attribute.
  • Submitting a <form>: Reloads the page and dispatches a synchronous HTTP request to the server.
  • Right-clicking an element: Opens the browser's native contextual menu.
  • Pressing the Spacebar or PageDown: Scrolls the viewport down.
  • Dragging an image: Displays a ghost silhouette of the dragged image.

In modern Single-Page Applications (SPAs), developers frequently need to suppress these native browser actions to execute custom client-side logic instead.

2. Using e.preventDefault()

React's SyntheticEvent provides the standard e.preventDefault() method to stop the browser's default action.

JSX
import React from 'react';
 
export default function CustomLink({ url, children }) {
const handleClick = (e) => {
// Suppress browser from navigating and refreshing the page
e.preventDefault();
 
console.log(`Internal navigation initiated to: ${url}`);
// Custom client-side router navigation (e.g., React Router navigate(url))
};
 
return (
<a href={url} onClick={handleClick} className="spa-link">
{children}
</a>
);
}

3. preventDefault() vs stopPropagation()

A frequent point of confusion among engineers is the difference between preventing defaults and stopping propagation:

  • e.preventDefault(): Stops the browser's default native action associated with the event (e.g., preventing a form from submitting or a link from navigating). It does NOT stop the event from bubbling up the React component tree!
  • e.stopPropagation(): Stops the event from bubbling up to parent DOM nodes. It does NOT prevent the browser's default action on the element!
JSX
function NestedCard() {
const handleCardClick = () => {
console.log('Card container clicked!');
};
 
const handleFavoriteClick = (e) => {
// 1. Prevent parent card's onClick from triggering
e.stopPropagation();
 
// 2. Prevent link from navigating away
e.preventDefault();
 
console.log('Item saved to favorites!');
};
 
return (
<div className="card" onClick={handleCardClick}>
<h3>Full-Stack React Course</h3>
<a href="/course/react" onClick={handleFavoriteClick} className="fav-btn">
★ Bookmark
</a>
</div>
);
}

If you click the "Bookmark" link:

  1. 1
    e.preventDefault() ensures the browser does not navigate away to /course/react.
  2. 2
    e.stopPropagation() ensures handleCardClick on the outer <div> is not triggered.

4. Why Returning false Does NOT Work in React

In old legacy HTML inline event handlers (<form onsubmit="return false;">) and jQuery, returning false from an event handler implicitly prevented default actions and stopped propagation.

React does not support returning false:

JSX
// ❌ FAILS in React: Returning false will NOT prevent page reload!
<form onSubmit={() => false}>
<button type="submit">Submit</button>
</form>
 
// ✅ CORRECT: Must explicitly invoke e.preventDefault()
<form onSubmit={(e) => { e.preventDefault(); }}>
<button type="submit">Submit</button>
</form>
Interactive Quiz

Practice Quiz

Question 1
What method must be invoked to cancel the browser's default behavior for an event in React?
Question 2
What is the key difference between e.preventDefault() and e.stopPropagation()?
Question 3
Why does returning false from a React event handler fail to stop default behavior?
Question 4
If an <a> tag has an onClick handler with e.preventDefault(), what happens when the user clicks the link?
Question 5
What happens if you call both e.preventDefault() and e.stopPropagation() inside a button click handler nested inside a card?
Next Lesson

Rendering Lists with the Array map Method

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Handling Click, Change, and Submit EventsRendering Lists with the Array map Method

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext