Why my react click bubbles up in spite of all stopPropagations?

Question

I have a component that has a child component deep inside it.

In the click event of child component, I have this code:

onClick={(e) => {
    // do something related to the deep child component
    e.stopPropagation()
    e.nativeEvent.stopPropagation()
}}

But this event still bubbles up and the onClick handler of my parent component is still fired.

I read about SyntheticEvent and I also saw these questions. But none of them solved my problem:

@SerhiiHolinei, I added both `e.preventDefault()` and `e.nativeEvent.preventDefault()` but it still fires my parent's `onClick`. Though I think `e.preventDefault()` is all about links and default behavior of elements, not propagation. — Hossein Fallah, Feb 14 '22 at 12:12
Seems like something else is going on in your setup as calling `stopPropagtion` works. see: https://codesandbox.io/s/competent-hellman-40qoj. Maybe share some more of the code that contains this component and how it's used — thedude, Feb 14 '22 at 12:34
@thedude it's a real-world application with a lot of complications. I can't share code, because I really don't know what to post here. I just want to know how can I debug it. React's docs are not very informative, or maybe I don't understand them. — Hossein Fallah, Feb 14 '22 at 12:43
I suggest you try to create a minimal example that reproduces this issue. It will also help you isolate the problem — thedude, Feb 14 '22 at 12:45

score 0 · Answer 1 · answered Feb 14 '22 at 12:28

0

You can try using onClickCapture() here instead of onClick().

answered Feb 14 '22 at 12:28

Kislaya Mishra

I read the docs, and it does not explain what `capture` is. What does that do? – Hossein Fallah Feb 14 '22 at 12:38

1 Answers1