e.stopPropagation / e.nativeEvent.stopImmediatePropagation not working in react

Question

I have had this working before so I'm not sure if I'm making a silly mistake or it is somewhere else in my code.

Here is the simple component I am testing:

import React, { Component } from 'react'

class TestPropagation extends Component {
    handleBodyClick = () => {
        console.log(`Did not stop propagation`)
    }

    componentDidMount() {
        const body = document.querySelector(`body`)
        body.addEventListener(`click`, this.handleBodyClick)
    }

    componentWillUnmount() {
        const body = document.querySelector(`body`)
        body.removeEventListener(`click`, this.handleBodyClick)
    }

    render() {
        return (
            <div
                style={{
                    position: `absolute`,
                    top: `200px`,
                    left: `20%`,
                    width: `calc(80vw - 20%)`,
                    height: `500px`,
                    color: `white`,
                    background: `green`,
                    cursor: `pointer`,
                }}
                onClick={e => {
                    e.stopPropagation()
                    e.nativeEvent.stopImmediatePropagation()
                    console.log(`Clicked Div Handler`)
                }}
            >
                Test Propagation Component
            </div>
        )
    }
}

export default TestPropagation

If I am correct that should prevent the console log of Did not stop propagation from happening when I click the div, but it is not.

That just prevents default browser actions, it does not prevent bubbling from happening. I did it just incase and it did not work! — Taylor Austin, Jul 10 '19 at 19:28

score 1 · Answer 1 · answered Jul 10 '19 at 19:41

1

The click event on the body is triggered before any react synthetic event. You will need to add a condition in your function like this:

handleBodyClick = e => {
  if (!e.target.className.includes('clickable')) {
    console.log('Did stop propagation');
  }
};

Then just add the class clickable on your component

answered Jul 10 '19 at 19:41

Vincent D'amour

3,746
1
27
39

2

Great answer, but it did not solve the using `e.stopPropagation` with body event listener. I still like it though :D – Taylor Austin Jul 10 '19 at 20:07

GalAbra · Accepted Answer · 2019-07-10T20:05:42.277

It's actually really interesting! Seems that the addEventListener precedes the onClick.

I managed to solve it by adding the same click listener to the test element, which worked as expected (stopped the click propagation to the body):

componentDidMount() {
    const body = document.querySelector('body');
    body.addEventListener('click', this.handleBodyClick);

    // This is me adding the click listener the same way you did
    document.getElementById('my_element').addEventListener('click', e => {
        e.stopPropagation();
        console.log('Clicked Div Handler 1');
    })
}

I hope this isn't considered a work-around, I'm still trying to understand this behaviour better.

EDIT: I found this question, which is basically the same (only without the React setting), but has no solution that achieves what you were asking.

Yeah since react does synthetic event listeners they must not fire off at the same time when mixing in pure js. This makes more since, great answer! — Taylor Austin, Jul 10 '19 at 20:06

e.stopPropagation / e.nativeEvent.stopImmediatePropagation not working in react

2 Answers2