首先有这样一段代码，

很久很久以前有这样一个故事，这要从远古时代说起

fn和fn1是一对父子

div是parent，span是children

fn是子，fn1是父

最近在学react

首先

        ...
        fn(ev){
            alert('children')
        }

        fn1(ev){
           alert('parent') 
        }
        render() {
            return <div onClick={this.fn1.bind(this)}>
                <span onClick={this.fn.bind(this)}>children</span>
            </div>
        }
        ...

一般情况下，原生js写法，阻止冒泡或者阻止默认事件，

原生JavaScript

有这两种

ev.cancelBubble = true
ev.stopPropagation()

但是react比较牛逼，使用ev.cancelBubble没有效果，return false也没有效果

官方也说了，在react中不能使用返回 false 的方式阻止默认行为

 fn(ev){
            alert('children')
            ev.cancelBubble = true
        }

然后使用ev.stopPropagation(),成功干掉默认事件

fn(ev){
            alert('children')
            ev.stopPropagation()
        }

还可以使用

event.preventDefault();

https://reactjs.org/docs/forms.html

另外

后在某乎看到一篇文章，

阻止合成事件与最外层document上的事件间的冒泡，用e.nativeEvent.stopImmediatePropagation();

我的理解就是，在div父级添加事件，点击div内部，阻止默认事件，不知道是不是这样了，文章也没仔细看，

这个没有测试，不知道从何下手

详见壁虎https://zhuanlan.zhihu.com/p/26742034