Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    export default function Toolbar() {
      return (
        <div className="Toolbar" onClick={() => {
          alert('You clicked on the toolbar!');
        }}>
          <button onClick={() => alert('Playing!')}>
            Play Movie
          </button>
          <button onClick={() => alert('Uploading!')}>
            Upload Image
          </button>
        </div>
      );
    }
    
    

If you click on either button, its ` onClick ` will run first, followed by the
parent ` <div> ` ’s ` onClick ` . So two messages will appear. If you click
the toolbar itself, only the parent ` <div> ` ’s ` onClick ` will run.

###  Pitfall

All events propagate in React except ` onScroll ` , which only works on the
JSX tag you attach it to.

###  Stopping propagation

Event handlers receive an **event object** as their only argument. By
convention, it’s usually called ` e ` , which stands for “event”. You can use
this object to read information about the event.

That event object also lets you stop the propagation. If you want to prevent
an event from reaching parent components, you need to call `
e.stopPropagation() ` like this ` Button ` component does:

App.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    function Button({ onClick, children }) {
      return (
        <button onClick={e => {
          e.stopPropagation();
          onClick();
        }}>
          {children}
        </button>
      );
    }
    
    export default function Toolbar() {
      return (
        <div className="Toolbar" onClick={() => {
          alert('You clicked on the toolbar!');
        }}>
          <Button onClick={() => alert('Playing!')}>
            Play Movie
          </Button>
          <Button onClick={() => alert('Uploading!')}>
            Upload Image
          </Button>
        </div>
      );
    }
    
    

Show more

When you click on a button:

  1. React calls the ` onClick ` handler passed to ` <button> ` . 
  2. That handler, defined in ` Button ` , does the following: 
     * Calls ` e.stopPropagation() ` , preventing the event from bubbling further. 
     * Calls the ` onClick ` function, which is a prop passed from the ` Toolbar ` component. 
  3. That function, defined in the ` Toolbar ` component, displays the button’s own alert. 
  4. Since the propagation was stopped, the parent ` <div> ` ’s ` onClick ` handler does _not_ run. 

As a result of ` e.stopPropagation() ` , clicking on the buttons now only
shows a single alert (from the ` <button> ` ) rather than the two of them
(from the ` <button> ` and the parent toolbar ` <div> ` ). Clicking a button
is not the same thing as clicking the surrounding toolbar, so stopping the
propagation makes sense for this UI.

#####  Deep Dive

####  Capture phase events

Show Details

In rare cases, you might need to catch all events on child elements, _even if
they stopped propagation_ . For example, maybe you want to log every click to
analytics, regardless of the propagation logic. You can do this by adding `
Capture ` at the end of the event name:

    
    
    <div onClickCapture={() => { /* this runs first */ }}>  
    
    
      <button onClick={e => e.stopPropagation()} />  
    
    
      <button onClick={e => e.stopPropagation()} />  
    
    
    </div>

Each event propagates in three phases:

  1. It travels down, calling all ` onClickCapture ` handlers. 
  2. It runs the clicked element’s ` onClick ` handler. 
  3. It travels upwards, calling all ` onClick ` handlers. 

Capture events are useful for code like routers or analytics, but you probably
won’t use them in app code.

###  Passing handlers as alternative to propagation

Notice how this click handler runs a line of code _and then_ calls the `
onClick ` prop passed by the parent: