React中preventDefault与return false的差异及实现机制问询

Great question! Coming from a jQuery background, this difference definitely takes a minute to wrap your head around—let’s break down why React forces you to use e.preventDefault() instead of relying on return false.

Why return false doesn’t work in React event handlers #

• React uses a Synthetic Event system
  React wraps native browser events into its own SyntheticEvent layer to ensure consistent behavior across all browsers. Unlike jQuery, which builds special handling for return false into its event system, React doesn’t interpret the return value of your event handler at all. The only way to stop a default action (like link navigation or form submission) is to explicitly call e.preventDefault() on the synthetic event object.

• jQuery’s return false is an implicit shorthand React avoids
  You’re totally correct that in jQuery, return false does three distinct things:

  • Executes e.preventDefault()
  • Runs e.stopPropagation()
  • Stops further execution of the handler function
    React intentionally skips this shorthand because it’s implicit and can lead to unexpected bugs. For example, you might only want to block a default action but still let the event bubble up to parent components—using return false would accidentally halt bubbling too. React prioritizes explicit, granular control over event behavior.

• Event delegation under the hood
  React attaches most events to the root of the DOM (like document) instead of individual elements. When an event fires, React creates a synthetic event, maps it to the correct component, and runs your handler. Since React’s internal event delegation code doesn’t check for your handler’s return value, there’s no way for return false to trigger a default action block. You have to call e.preventDefault() directly.

Example comparison #

Let’s see this in action with code:

// ✅ React: This correctly prevents link navigation
const WorkingLink = () => {
  const handleClick = (e) => {
    e.preventDefault();
    console.log("Link clicked, but no navigation occurs");
  };

  return <a href="/home" onClick={handleClick}>Go Home</a>;
};

// ❌ React: This does NOT prevent navigation
const BrokenLink = () => {
  const handleClick = () => {
    return false;
    console.log("This log runs, but the link still navigates");
  };

  return <a href="/home" onClick={handleClick}>Go Home</a>;
};

The core idea here is React’s focus on explicitness. By requiring you to call e.preventDefault() directly, it eliminates ambiguity and helps you write more predictable code—especially when dealing with complex event flows across nested components.

内容的提问来源于stack exchange，提问作者Bhojendra Rauniyar