jquery之冒泡事件介绍以及阻止冒泡

什么是事件冒泡

wubin.pro
子钦博客

布局结构如下图

jquery之冒泡事件介绍以及阻止冒泡_第1张图片

 

一共单层元素

从外到里依次:div、p、span

每个元素都有单机事件

当单击div触发弹出box

当单击p标签时依次弹出:test、box

当单击span标签依次弹出:inner、test、box

这个即为事件冒泡

从最里层冒泡到最外层

 

如何阻止

很多时候我们不希望事件冒泡

也就是我点击p的时候只弹出test

点击span时候只弹出inner

1.event.stopPropagation()


    
        
            wubin.pro 
            武斌博客         

    
    

这个时候再点击子钦博客时

只是弹出inner    
2.return false

  


    
        wubin.pro 
        武斌博客     

效果跟第一种相同

都可以阻止事件冒泡

 

return false与event.stopPropagation()区别

我们将以上代码修改为:

 


    
        wubin.pro 
        子钦博客     

 

可以看出

当使用return false时

a标签的默认行(跳转页面)为也会被阻止

当使用event.stopPropagation()时

先弹出inner

然后页面跳转

 

总结

 


    
        wubin.pro 
        子钦博客     

return false:阻止事件冒泡和默认行为

event.stopPropagation():单独阻止事件冒泡

event.preventDefault():单独阻止默认行为

  

 

你可能感兴趣的:(jquery之冒泡事件介绍以及阻止冒泡)