• 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

  • 相关阅读:
    面向对象
    面向对象
    面向对象
    面向对象
    面向对象
    面向对象
    面向对象
    面向对象
    3.1
    面向对象
  • 原文地址:https://www.cnblogs.com/yadiblogs/p/10137413.html
Copyright © 2020-2023  润新知