I have this scenario, where when parent element is clicked, it flips to show a child element with different colours. Unfortunately, when the user clicks on one of the colours, the 'click' event on parent is also triggered.
How can I stop the event trigger on parent when the child is clicked?
Possible solutions I am wondering:
CSS?
Appendpointer-events : none
class to the parent when the child is clicked. However, this would mean that the parent will need to be cleansed of thepointer-events
class later.Using Ref?
Record theref
of the parentReact
element & upon click on the child, compare theevent.target
against the ref? I don't like this because I don't like the globalref
.
Thoughts and the better solution would be much appreciated. The question is: How can I stop the event trigger on parent when the child is clicked?
See Question&Answers more detail:os