2

I'm trying to set an event on a few cards, but when I try to click them, the click goes inside the card, on the child elements. I solved it by setting "pointer-events: none" to the children, but I don't think is the best way.

EricMainhard
  • 21
  • 2
  • Events in JavaScript bubbles and this is normal that event fires on children – Konrad Jul 07 '22 at 19:05
  • Try this https://stackoverflow.com/a/42022618/13712263 – Hussain Jul 07 '22 at 19:11
  • Does this answer your question? [Unable to understand useCapture parameter in addEventListener](https://stackoverflow.com/questions/7398290/unable-to-understand-usecapture-parameter-in-addeventlistener) – Besworks Jul 07 '22 at 19:49

1 Answers1

2

You can use event.stopPropagation method to stop bubbling the event to the parents, but it's not a good solution if you are using a statistics service.

You can also capture the event in the parent and check if the event.target is the child, just return the click handler.

Mina
  • 14,386
  • 3
  • 13
  • 26