div inside a div - preventing complex onClick event propagation
I currently have the following component -
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
e.preventDefault?
e.preventImmediatePropagation?
not enough context to really answer
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().
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