fn1(){
         alert('父级');
     }
     fn2(ev){
         ev.stopPropagation();
         ev.nativeEvent.stopImmediatePropagation();

         alert("子集");
     }
     componentDidMount(){
         document.onclick=function(){
             alert('document');
         };

         this.refs['fa'].onclick=function(ev){
             //console.log(this);
             console.log(ev.target);
             alert("爷爷");
         }
     }

<p ref="fa" className="fa">
     <p onClick={this.fn1.bind(this)}>
     <p onClick={this.fn2.bind(this)}>aaaaaaaaaaa</p>
</p>

Only use e.stopPropagation() to prevent the parent event from bubbling. The fn1 event will not trigger, but the document event will trigger?
e.nativeEvent.stopPropagation() prevents bubbling to docuemnt but the parent's fn1 is triggered. Every time fa is clicked, it will be triggered and it will be triggered first. If e.target cannot be obtained, only capturing fn2 will have the result p aaa, So the question is how to trigger only outer events without capturing them? What is the approximate event mechanism of react events? Thank you for the solution·