前言
在学习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