javascript - e.stopPropagation/e.nativeEvent.stopImmediatePropagation 在 react 中不起作用

Question

我以前有过这个工作，所以我不确定我是否犯了一个愚蠢的错误，或者它在我的代码中的其他地方。

这是我正在测试的简单组件:

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

如果我是正确的，当我点击 div 时，应该会阻止 Did not stop propagation 的控制台日志发生，但事实并非如此。

Answer 1

这真的很有趣!似乎 addEventListener 在 onClick 之前。

我设法通过向测试元素添加相同的点击监听器来解决它，它按预期工作(停止了点击传播到 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');
    })
}

我希望这不是解决方法，我仍在努力更好地理解这种行为。

编辑:我找到了 this question ，这基本上是相同的(只是没有 React 设置)，但没有实现您所要求的解决方案。