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:最先執(zhí)行原生方法 然后是合成事件
  2:如果點(diǎn)擊子節(jié)點(diǎn),父類上綁定了原生事件，會(huì)先執(zhí)行父類的原生事件，然后再執(zhí)行子類的合成事件
  3: 原生事件可以阻止合成事件, 合成事件無法阻止冒泡事件, 但是
    1- e.nativeEvent.stopImmediatePropagation() 可以阻止document上的事件冒泡
    2- e.stopImmediatePropagation() 可以阻止連續(xù)相同的事件綁定
-->
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容