什么是事件冒泡

<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" onclick="box()">

    <p onclick="test()" style="background: blue">

        wubin.pro <br>

        <span style="background: green" onclick="inner()">子钦博客</span>

    </p>

</div>

<script>

    function inner() {

        alert('inner');

    }

    function test() {

        alert('test')

    }

    function box() {

        alert('box')

    }

</script>

布局结构如下图

一共单层元素

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

每个元素都有单机事件

当单击div触发弹出box

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

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

这个即为事件冒泡

从最里层冒泡到最外层

如何阻止

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

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

点击span时候只弹出inner

1.event.stopPropagation()

<body>

    <div style="width: 200px;height: 200px;background: red;margin: 200px auto;" onclick="box()">

        <p onclick="test()" style="background: blue">

            wubin.pro <br>

            <span style="background: green" onclick="inner(event)">武斌博客</span>

        </p>

    </div>

    <script>

        function inner() {

            alert('inner');

            event.stopPropagation();

        }

        function test() {

            alert('test')

        }

        function box(event) {

            alert('box')

        }

    </script>

</body>

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

只是弹出inner    
2.return false

　　

<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" >

    <p  style="background: blue">

        wubin.pro <br>

        <span style="background: green" >武斌博客</span>

    </p>

</div>

<script>

    $(function () {

        $('span').click(function(){

            alert('inner');

            return false;

        })

        $('p').click(function(){

            alert('test');

        })

        $('div').click(function(){

            alert('box');

        })

    })

</script>

效果跟第一种相同

都可以阻止事件冒泡

return false与event.stopPropagation()区别

我们将以上代码修改为:

　

<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" >

    <p  style="background: blue">

        wubin.pro <br>

        <a href="https://wubin.pro" style="background: green" >子钦博客</a>

    </p>

</div>

<script>

    $(function () {

        $('a').click(function(event){

            alert('inner');

            // return false;

            event.stopPropagation();

        })

        $('p').click(function(){

            alert('test');

        })

        $('div').click(function(){

            alert('box');

        })

    })

</script>　

可以看出

当使用return false时

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

当使用event.stopPropagation()时

先弹出inner

然后页面跳转

总结

　

<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" >

    <p  style="background: blue">

        wubin.pro <br>

        <a href="https://wubin.pro" style="background: green" >子钦博客</a>

    </p>

</div>

<script>

    $(function () {

        $('a').click(function(event){

            alert('inner');

            // return false;

            // event.stopPropagation();

            event.preventDefault();

        })

        $('p').click(function(){

            alert('test');

        })

        $('div').click(function(){

            alert('box');

        })

    })

</script>

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

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

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

　　

jquery之冒泡事件介绍以及阻止冒泡的更多相关文章

  1. vue 事件上加阻止冒泡 阻止默认事件

    重点 vue事件修饰符 <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提 ...

  2. 事件修饰符 阻止冒泡 .stop 阻止默认事件 .prevent

    stop修饰符 阻止冒泡行为 可以在函数中利用$event传参通过stopPropagation()阻止冒泡 通过直接在元素中的指令中添加 .stop prevent修饰符 阻止默认行为 可以在函数中 ...

  3. 微信小程序--阻止冒泡事件

    微信小程序事件的使用方式 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数. <view id="tapTest ...

  4. 前端基本知识（一）：W3C标准&&冒泡事件，捕获事件，W3C DOM对象模型，对比分析

    W3C标准是万维网联盟, 其他的可以参考万维网版本的更新内容 一.W3C标准 二.W3C DOM事件 三.冒泡事件 四.捕获事件 一.W3C标准 其实网页是由三分部组成:1.结构(structure) ...

  5. 锋利的jQuery读书笔记---jQuery中的事件

    jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...

  6. js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...

  7. JQuery阻止冒泡事件on绑定中异常情况分析

    科普下事件冒泡以及默认行为,以下面例子举列子:     事件冒泡:当点击内部button元素时,会触发自身及外层 a的点击事件,这就是事件冒泡引起的.事件会随着 DOM 的层次结构依次向上传播. 事件 ...

  8. 【笔记】jquery阻止冒泡事件发生的语句

    时间触发时会执行两个步骤:1.捕获 2.冒泡,而很多浏览器包括jquery都不支持捕获动作所以只能执行冒泡动作. 所谓冒泡就是当点击就是事件的执行顺序,本人的理解为:但某一元素触发时间时它的祖先元素( ...

  9. jQuery中事件对象e的事件冒泡用法示例（事件冒泡与阻止冒泡）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 从壹开始 [ Id4 ] 之二║ 基础知识集合 & 项目搭建一

    前言 哈喽大家又见面啦,感觉好久没更新了,这几天看了一本书<解忧杂货铺>,嗯挺好的,推荐一下

  2. 前端笔记之NodeJS（三）Express&ejs模板引擎&请求识别

    一.Express框架 1.1基本使用 创建http服务器特别麻烦,express框架解决了这个的问题. Express在node界的地位,就相当于jQuery在DOM界的地位.jQuery的核心就是 ...

  3. asp.net core 系列之中间件进阶篇-编写自定义中间件(middleware)

    中间件是被用到管道(pipeline)上来处理请求(request)和响应的(response). asp.net core 本身提供了一些内置的中间件,但是有一些场景,你可能会需要写一些自定义的中间 ...

  4. React 项目生产版本迭代页面不刷新问题

    React 页面缓存 react 打包项目进行服务端部署后,会发现index.html被浏览器缓存,访问项目url指向的还是上个版本的内容.原理是index.html被缓存后,路由指向和跳转都是旧版的 ...

  5. [Android 除錯] Conflict with dependency

    Android Studio build 時的錯誤訊息 : Conflict with dependency 詳細錯誤訊息 : Conflict with dependency 'com.androi ...

  6. hbase coprocessor 二级索引

    Coprocessor方式二级索引 1. Coprocessor提供了一种机制可以让开发者直接在RegionServer上运行自定义代码来管理数据.通常我们使用get或者scan来从Hbase中获取数 ...

  7. Windows Server 2016-Powershell加域并指定OU (二)

    上章节提到通过netdom join加域并指定对应OU,本章再补充一例现成powershell加域并指定对应OU的脚本,便于大家工作中使用. $PlainPassword = P@ssw0rd $Us ...

  8. C#异步编程----Thread

    一.问题由来 多线程能实现的基础: 1.CPU运行速度太快,硬件处理速度跟不上,所以操作系统进行分时间片管理.这样,宏观角度来说是多线程并发 ,看起来是同一时刻执行了不同的操作.但是从微观角度来讲,同 ...

  9. 第二章.python入门

    2.1环境的安装 解释器:py2和py3 添加环境变量的作用:便于找到python解释器 开发工具:pycharm 2.2编码 2.2.1编码基础 ascii:只表示英文,8位表示一个元素,pytho ...

  10. Linux 桌面玩家指南：14. 数值计算和符号计算

    特别说明:要在我的随笔后写评论的小伙伴们请注意了,我的博客开启了 MathJax 数学公式支持,MathJax 使用$标记数学公式的开始和结束.如果某条评论中出现了两个$,MathJax 会将两个$之 ...