本文共 2245 字，大约阅读时间需要 7 分钟。

前言

故事的开头是这样的：写业务的过程中，发现在React的onClick的回调函数里，用stopPropagation阻止绑定在document上的事件的时候，是没办法做到的，只可以阻止outClick事件的触发。详情如下：

class ExampleApplication extends React.Component {    componentDidMount() {        document.addEventListener('click', () => {            alert('document click');        })    }    outClick(e)         alert('outClick');    }    onClick(e) {        alert('onClick');        e.stopPropagation();    }    render() {        return 
   
            
     测试click事件         
   
    }}

这个例子最终会输出：

onClick, documentClick

关于这个问题的解释，网上五花八门，有些将其归结为是由于事件绑定快慢的原因，例如这篇里说

我们直接在jsx模板上绑定的事件，都是委托在了document上，那自然要比直接在dom上绑定的事件慢了，等document收到事件后才去e.stopPropagation()，太晚了

其实我们仔细想想：React在首次渲染的时候，就会执行事件的绑定，如果是由于绑定快慢的问题导致的话，应该先输出documentClick, 在输出onClick，所以由上面例子的输出可知，并不是因为document收到事件快慢的原因而导致这个问题。

真相

真相只有一个，那就是：

出现上述bug的主要原因是混用浏览器原生事件跟React合成事件

详细解释：React有自己的一套事件处理机制，它会将所有的事件都绑定在document上，然后再用dispatchEvent统一分发，这时候分发的是合成事件。

而onClick(e)这时候拿到的e其实是合成事件，只能阻止合成事件的冒泡。

图片来源：https://fabiaoqing.com/biaoqing/detail/id/85424.html

我们当然不是那么随便的人，随便起来。。。不好意思说多了，还是举个栗子先来简单验证一下吧：

class ExampleApplication extends React.Component {    componentDidMount() {        document.addEventListener('click', () => {            alert('document click');        })        document.getElementById('div1').addEventListener('click', () => {            alert('原生outClick');        })    }    outClick(e) {        console.log(e.currentTarget)        alert('合成outClick');    }    onClick(e) {        console.log(e.currentTarget);        alert('onClick');        e.stopPropagation();    }    render() {        return 
   
            
     测试click事件         
   
    }}

做了点小改动，就是外层的div绑定的函数用原生的方式跟jsx的方式都绑定一次，所以最终的输出为

'原生outClick', 'onClick','document click'

所以button回调函数里的stopPropagation只能阻止合成事件的冒泡，而对于原生绑定的，则不行。

解决方法

解决方法有几种，我个人认为最简单的就是直接在onClick里利用。原理是这样的：

对于例子一里，document其实绑定了两种事件：

// react 合成事件, dispatchEvent里面执行回调函数document.addEventListener('click'， dispatchEvent);// 浏览器原生document.addEventListener('click', () => {   alert('document click');})

而dispatchEvent里的stopImmediatePropagation可以使得绑定在document上的其他事件不会被触发

onClick(e) {        console.log(e.currentTarget);        alert('onClick');        e.nativeEvent.stopImmediatePropagation();    }

当然本篇文章只是为了抛砖引玉，重点是下一篇的react事件机制，欢迎继续收看。

图片来源：

原文

转载地址：http://bpwii.baihongyu.com/