react 阻止事件冒泡

前言

在學習react阻止事件冒泡，需要先了解 合成事件 和 原生事件

合成事件：在jsx中直接綁定的事件，就是合成事件；

原生事件： 通過js原生代碼綁定的事件，就是原生事件；

react事件：react有自己的一套事件處理機制，它將所有事件都綁定在document上，然后再用dispatchEvent來分發，這時候分發的就是合成事件

實際是document上綁定了兩個事件：

// react 合成事件, dispatchEvent里面執行回調函數
document.addEventListener('click'， dispatchEvent);

// 瀏覽器原生
document.addEventListener('click', () => {
   alert('document click');
})

舉栗子（什么是合成事件和原生事件的例子）：

import * as React from 'react'

export default class IndicatorItem extends React.Component {
  componentDidMount () {
 // 這就是原生事件
    document.addEventListener('click', this.click)
  }
    click = (e) => {
      console.log('原生click', e)
      if (e.target.className !== 'indicator_item' && e.target.parentElement.className !== 'indicator_item') {
        // debugger
        clearIndicatorDetail()
      }
      e.stopPropagation()
    }

    handleClick=(id, status, e) => {
　　　　console.log('合成事件')
      // 阻止事件冒泡，（阻止這個合成事件，往document上冒泡，因此不會觸發click方法）
      e.nativeEvent.stopImmediatePropagation()
 // 阻止合成事件間的冒泡，不會往最外層的div的test方法冒了，如果不加這句代碼，就會冒泡至外層div，執行test方法。  

        e.stopPropagation()

    }

     test = ()=> {

　　　 　　// 這個沒有加阻止冒泡，因此，這個可以往document上冒

        console.log('合成 out')

     }

    render () {return (
        <div onClick={this.test}>

          {
            indicators.map((item, index) => {
              return (
                <div className='indicator_item' key={`item${index}`} onClick={(e) => this.handleClick(item.id, item.status, e)}>
                  { item.status === 1 ? null : (<Tooltip title={iconWordMap[item.status]} style={{ marginLeft: '-20px' }}>
                    <Icon name={iconMap[item.status]} style={{ marginRight: 8, color: item.status === 0 ? '#FFD738' : '#82868C' }} />
                  </Tooltip>) }
                  <span className='indicator_item_nickname'>{item.nickname}</span>
                </div>
              )
            })
          }
        </div>
      )
    }
}

正文：

阻止事件冒泡分三種：

1：阻止合成事件往最外層document上的事件冒泡，用e.nativeEvent.stopImmediatePropagation();

2: 合成事件間的冒泡，使用 e.stopPropagation()；

3：阻止合成事件，往處理document上的其他原生事件冒泡，需要通過e.target來判斷，示例代碼如下。

import React,{ Component } from 'react';
import ReactDOM,{findDOMNode} from 'react-dom';

class Counter extends Component{
constructor(props){
super(props);

this.state = {
count:0,
        }
    }

handleClick(e){
this.setState({count:++this.state.count});
    }
render(){
return(
<div ref="test">
<p>{this.state.count}</p>
<a ref="update" onClick={(e)=>this.handleClick(e)}>更新</a>
</div>
        )
    }

componentDidMount() {
document.body.addEventListener('click',e=>{
// 通過e.target判斷阻止冒泡
            if(e.target&&e.target.matches('a')){
return;
            }
console.log('body');
        })
    }
}

var div1 = document.getElementById('content');

ReactDOM.render(<Counter/>,div1,()=>{});

 

參考文章：https://zhuanlan.zhihu.com/p/26742034  和 https://segmentfault.com/a/1190000013343819