JavaScript: Preventing Parent Event When Child Event Is Triggered

I created a React JS web application called Vacay Away that helps organize your vacation schedule. Read more about it here!

An issue I came across while setting up my Vacation component’s event handlers was that when I clicked on a child event trigger, the event on the parent component was also triggered simultaneously. More specifically, when I clicked the delete icon on a vacation component, it would not only delete the vacation, but also trigger the event on the card and route to the vacations show page (which didn’t exist anymore because I deleted the vacation).

Bordered in yellow is the vacation card (parent element) with a click event to go to the vacation’s show page. Bordered in red is the delete icon (child element) with a click event to delete the vacation.

Then I learned about using the stopPropagation() method of the Event interface to prevent further propagation, or bubbling up to the parent elements.

In my code, my parent element is the <CardActionArea> while my child element is the <IconButton>. When the onClick is triggered in my child element, I want to stop the propagation to my parent element’s onClick event.

<CardActionArea onClick={showPageRoute} >
  <Card container className={classes.card} elevation={5}>
    <CardHeader
      action={
        <IconButton onClick={(e) => handleDelete(vacation.id, e)}>
          <DeleteOutlined color="primary" />
        </IconButton>
      }
    />
    /** Code for Card Content **/   
    
  </Card>
</CardActionArea>

My handleDelete is a function passed down as props from my parent component, Vacation List. Therefore, I made sure to stop any propagations when I trigger the event, like so:

handleDelete = (vacationId, e) => {
  if(e && e.stopPropagation) e.stopPropagation(); 
/** code to delete the vacation **/
}

If the event exists and stopPropagation is supported in the browser, any bubbling of events will be cancelled. No redirecting to a non-existent page!

Closing Remarks

I thought this native Javascript method was pretty handy and thought I would share.

I also learned that there is an equivalent called cancelBubble, the Microsoft method, versus stopPropagation being a W3C method. Instead of calling e.stopPropagation() in the above example, you can set e.cancelBubble = true as a boolean value.