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
matewilk2y ago
e.preventDefault? e.preventImmediatePropagation? not enough context to really answer
sumatoken
sumatoken2y 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
jairrard2y 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
Want results from more Discord servers?
Add your server