div inside a div - preventing complex onClick event propagation

I currently have the following component -

<div onClick={() => { // redirect to some other route }}>
  <div onClick={(e) => { e.stopPropagation(); setIsMenuOpen(true) }}>
    <Menu open={isMenuOpen} />
  </div>
</div>

<div onClick={() => { // redirect to some other route }}>
  <div onClick={(e) => { e.stopPropagation(); setIsMenuOpen(true) }}>
    <Menu open={isMenuOpen} />
  </div>
</div>

The first click works fine - the menu opens as it should without the parent div onClick going through. However, even though I do have e.stopPropagation(), when I click on an option in the menu or anywhere else on the page, the parent div onClick still goes through after. How can I stop this?

3 Replies

matewilk•2y ago

e.preventDefault? e.preventImmediatePropagation? not enough context to really answer

sumatoken•2y ago

From Mozilla docs: The stopPropagation() does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, see the preventDefault() method. It also does not prevent propagation to other event-handlers of the current element. If you want to stop those, see stopImmediatePropagation().

jairrard•2y ago

where can I create a sandbox to give the example in detail? Basically I am trying to make a table row such that when i click the row it goes to a route but if I click on a button icon in the row, it opens a menu from which I can click some options As of now the menu opens fine but then when I click a menu item or outside of the table, it still goes to the route

Gaming

Programming

div inside a div - preventing complex onClick event propagation