事件流之冒泡与捕获——由react中遇到的冒泡Bug聊起

React项目中遇到需要阻止冒泡的需求,觉得这是一个之前没有被发现的坑,总结在此,以备后查!

一,背景

世纪初的网景与微软公司的浏览器大战想必身为程序员都略有耳闻,冒泡与捕获——两种截然相反的处理事件机制,就是这场战争的主角之一。

      


二,冒泡事件及事件捕获

  • 什么是冒泡事件

顾名思义,像是水中冒泡一样,从下往上。事件由第一个被触发的元素接收,然后逐级向上传播。s1s2同时有点击事件,当点击子元素s2时,会先触发s2再触发s1

冒泡示意图

  • 什么是事件捕获

与冒泡事件相反,是冲上往下。事件由body逐级向下传播,直到到达目标元素。s1s2同时有点击事件,当点击子元素s2时,会先触发s1再触发s2

捕获示意图


三,DOM2之后的世界太平——addEventListener的第三个参数

网景和微软曾经的战争还是比较火热的,当时, 网景主张捕获方式,微软主张冒泡方式。后来 w3c 采用折中的方式,平息了战火,制定了统一的标准——先捕获再冒泡。
addEventListener的第三个参数就是为冒泡和捕获准备的。
addEventListener有三个参数:

element.addEventListener(event, function, useCapture)

//第一个参数是需要绑定的事件
//第二个参数是触发事件后要执行的函数
//第三个参数默认值是false,表示在事件冒泡阶段调用事件处理函数;如果参数为true,则表示在事件捕获阶段调用处理函数。

w3c说,大家有话好好说,争来争去的干嘛呀,来,用这个,你爱用啥用啥,反正我的事件流固定就是先捕获后冒泡,至于你愿意谁先谁后,你自己注册(就是js里声明的意思)。


新的事件流示意图

举个例子

html

s1
s2

javaScript


好,大家跟我拿着这个图一步一步照着看:


新的事件流示意图

捕获阶段

  • 点击s2(目标节点),click事件从document->html->body->s1->s2

  • 这里在s1上发现了捕获注册事件,则输出"s1 捕获事件"

  • 到达s2,已经到达目的节点,

  • s2上注册(在js中声明,下面不一一解释)了冒泡和捕获事件,先注册的冒泡后注册的捕获,则先执行冒泡,输出"s2 冒泡事件"

  • 再在s2上执行后注册的事件,即捕获事件,输出"s2 捕获事件"

冒泡阶段

  • 下面进入冒泡阶段,按照s2->s1->body->html->document

  • 在s1上发现了冒泡事件,则输出"s1 冒泡事件"


四,如何停止冒泡事件和阻止浏览器默认行为

  • e的兼容

function fn(e){
    var event = e || window.event;
}

FireFox里的EventIE里的不同,IE里的是全局变量,随时可用。FireFox里的要用参数引导才能用,是运行时的临时变量在IE/Opera中是window.event,在FireFox中是event。而事件的对象,在IE中是window.event.srcElement,在Firefox中是event.targetOpera中两者都可用

  • 阻止事件冒泡

W3C的方法是e.stopPropagation()IE则是使用e.cancelBubble = truestopPropagation是事件对象Event的一个方法,作用是阻止目标元素的冒泡事件,但是不会阻止默认行为stopPropagation就是阻止目标元素的事件冒泡到父级元素了解更多请点这:理解DOM中的事件流

  • 阻止事件冒泡兼容:

function stopPropagation(e) {
    var e = e || window.event;
    if ( e && e.stopPropagation ){
        e.stopPropagation();
    }else{
        e.cancelBubble = true;
    }
}
  • 阻止浏览器默认行为

W3C的方法是e.preventDefault()IE则是使用e.returnValue = falsepreventDefault是事件对象Event的一个方法,作用是取消一个目标元素的默认行为。如果元素没有默认行为,调用无效。什么元素有默认行为呢?如链接点我,提交按钮

return false:
JSreturn false只会阻止默认行为,而jQuery则既阻止默认行为又防止对象冒泡

阻止浏览器默认行为兼容:

function stopDefault(e) {
    var e = e || window.event;
    if (e && e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    return false;
}

五,react中采用的事件处理机制及阻止方式

首先我们要了解react中合成事件和原生事件是什么。

  • 合成事件

在jsx中直接绑定的事件,如

this.handleClick(e)}>更新

这里的handleClick事件就是合成事件

  • 原生事件

通过js原生代码绑定的事件,如

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

或者

this.refs.update.addEventListener('click',e=>{
    console.log('update');
});
  • 阻止冒泡事件分三种情况

A、阻止合成事件间的冒泡,用e.stopPropagation();

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){
        // 阻止合成事件间的冒泡
        e.stopPropagation();
        this.setState({count:++this.state.count});
    }

    testClick(){
        console.log('test')
    }

    render(){
        return(
            
this.testClick()}>

{this.state.count}

this.handleClick(e)}>更新
) } } var div1 = document.getElementById('content'); ReactDOM.render(,div1,()=>{});

B、阻止合成事件与最外层document上的事件间的冒泡,用e.nativeEvent.stopImmediatePropagation();

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){
        // 阻止合成事件与最外层document上的事件间的冒泡
        e.nativeEvent.stopImmediatePropagation();
        this.setState({count:++this.state.count});
    }

    render(){
        return(
            

{this.state.count}

this.handleClick(e)}>更新
) } componentDidMount() { document.addEventListener('click', () => { console.log('document'); }); } } var div1 = document.getElementById('content'); ReactDOM.render(,div1,()=>{});

C、阻止合成事件与除最外层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(
            

{this.state.count}

this.handleClick(e)}>更新
) } 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(,div1,()=>{});

react中阻止默认事件方法在官方文档中

六,参考文章:

  • JS中事件冒泡与捕获
  • react阻止冒泡事件,绝对干货

你可能感兴趣的:(事件流之冒泡与捕获——由react中遇到的冒泡Bug聊起)