前言
先来看这
故事的开头是这样的：写代码的过程中，发现在内层用stopPropagation阻止绑定在document上的事件的时候，是没办法做到的，只可以阻止outClick事件的触发。 class ExampleApplication extends React.Component { componentDidMount() { document.addEventListener('click', () => { alert('document click'); }) } outClick(e) { console.log(e.currentTarget); alert('outClick'); } onClick(e) { console.log(e.currentTarget); alert('onClick'); e.stopPropagation(); } render() { return }} 关于这个问题的解释，网上五花八门，有些将其归结为是由于事件委托的原因，例如这篇里说
我们直接在jsx模板上绑定的事件，都是委托在了document上，那自然要比直接在dom上绑定的事件慢了，等document收到事件后才去e.stopPropagation()，太晚了
其实从上面例子的输出： 由'onClick',再到'document click'可知，其实原生document上绑定的事件时最后执行的，所以并不是因为document收到事件快慢的原因而导致这个问题。
真相
真相只有一个，那就是：
出现上述bug的主要原因是混用浏览器原生事件跟React合成事件详细解释：React有自己的一套事件处理机制，它会将所有的事件都绑定在document上，然后再用dispatchEvent统一分发，这时候分发的是合成事件。
onClick(e)这时候拿到的e其实是合成事件，只能阻止合成事件的冒泡。 举个栗子来验证一下
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 }} 做了点小改动，就是外层的div绑定的函数用原生的方式跟jsx的方式都绑定一次，所以最终的输出为
'原生outClick', 'onClick','document click'
所以button回调函数里的stopPropagation只能阻止合成事件的冒泡，而对于原生绑定的，则不行。
解决方法
解决方法有几种，我个人认为最简单的就是直接在onClick里利用[event.stopImmediatePropagation()][2]。原理是这样的：
对于例子一里，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(); } 当然本篇文章只是为了抛砖引玉，重点是下一篇的，欢迎继续收看。