事件冒泡（阻止冒泡）和事件捕捉（阻止捕获）

很多朋友私聊问我怎么阻止事件冒泡，不懂事件冒泡和事件捕捉的童鞋看过来了，小编今天就来给大家讲解一下。

我们先来简单看一下原理

原理 ：

DOM事件流（event flow ）：
存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件冒泡(event capturing） ：
当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。）

事件捕获（event capturing）：
当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。

事件冒泡

    
        
        
        
    
    
        

            

                
111
            
            
        
    
    

这是事件冒泡，一共会弹出三次
第一个会弹出 a
第二个会弹出 b
第三个会弹出 c

//阻止事件冒泡
event.stopPropagation()

阻止事件冒泡

    
        
        
        
    
    
        

            

                
111
            
          
        
    
    

这样就可以阻止事件冒泡
会弹出两次
第一个会弹出 a
第二个会弹出 b
阻止了 c 的弹出

事件捕获

    
        
        
        
    
    
        

            

                
111
            
            
        
    
    

这是事件捕捉，一共会弹出三次
第一个会弹出 c
第二个会弹出 b
第三个会弹出 a

第三个值换成false，就会变成事件冒泡 （如上）

如果true和false共存的话，就会先执行true后执行false

阻止事件捕获

    
        
        
        
    
    
        

            

                
111
            
            
        
    
    

这样就可以阻止事件捕获
会弹出两次
第一个会弹出 c
第二个会弹出 b
阻止了 a 的弹出

有帮助的话 ，别忘了下面的心心点你一下（想知道更多关于知识请私信我哦）

如有不懂或解决不了的问题可以私信我，或者在下方评论 ，小陈帮你解决困难