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

什么是事件冒泡


    
        wubin.pro 

        子钦博客

布局结构如下图

一共单层元素

从外到里依次：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

相关