React 冒泡的小问题

#1 
 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("爷爷");
         }
     }

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

只用e.stopPropagation()阻止父级事件冒泡fn1 事件不会触发,但是document的事件触发？ e.nativeEvent.stopPropagation() 阻止冒泡到docuemnt但是父级的fn1触发, 每次点击fa都会触发并且最先触发，拿不到e.target,只有捕获fn2 才会有结果 div aaa, 主要是爷爷的事件怎么处理呢？这个事件为什么会先触发？为什么触发这个事件会触发fn2的事件