react 合成事件和原生事件混用

<!--suppress ALL -->
<html>

<head>
    <meta charset="utf-8">
    <title>react的合成事件</title>
</head>

<body>
    <div id="app"></div>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
    <script type="text/babel">

        class MessageBox extends React.Component {

            componentDidMount() {
                // documemt层的原生事件
                // document.addEventListener('click', (e) => {
                //     alert('document 原生事件')
                //     e.stopImmediatePropagation()
                // })

                document.addEventListener('click', () => {
                    alert('document 原生事件')
                })

                document.body.addEventListener('click', () => {
                    alert('body 原生事件')
                })

                document.getElementById('parent').addEventListener('click', (e) => {
                    alert('parent 原生事件')
                }, false)

                document.getElementById('child').addEventListener('click', (e) => {
                    alert('child 原生事件')
                    //  e.stopPropagation() //原生事件可以阻止合成事件
                }, false)
            }

            parent = (e) => {
                alert('父组件')
            }

            child = (e) => {
                alert('子组件')
                e.preventDefault()
                //  1：无法阻止 document上面的原生事件，2.可以阻止合成事件的冒泡
                e.stopImmediatePropagation()
                // e.nativeEvent.stopImmediatePropagation()
                // 1.阻止合成事件往最外层document上的事件冒泡
            }
            render() {
                return (
                    <div id='parent' onClick={this.parent}>
                        父组件
                        <div id='child' onClick={this.child}>子组件</div>
                    </div>
                );
            }
        }
        // 渲染
        ReactDOM.render(<MessageBox />, document.getElementById('app'), function () {
            // console.log('渲染完成啦！！');
        });
    </script>
</body>

</html>

<!-- 合成事件 react
  1:最先执行原生方法 然后是合成事件
  2:如果点击子节点,父类上绑定了原生事件，会先执行父类的原生事件，然后再执行子类的合成事件
  3: 原生事件可以阻止合成事件, 合成事件无法阻止冒泡事件, 但是
    1- e.nativeEvent.stopImmediatePropagation() 可以阻止document上的事件冒泡
    2- e.stopImmediatePropagation() 可以阻止连续相同的事件绑定
-->