什么是事件冒泡

<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. 服务端预渲染之Nuxt（爬坑篇）

    Nuxt是解决SEO的比较常用的解决方案,随着Nuxt也有很多坑,每当突破一个小技术点的时候,都有很大的成就感,在这段时间里着实让我痛并快乐着.在这里根据个人学习情况,所踩过的坑做了一个汇总和总结. ...

  2. 【转载】通俗易懂，什么是.NET?什么是.NET Framework？什么是.NET Core?

    本文转载自:http://www.cnblogs.com/1996V/p/9037603.html [尊重作者原创,转载说明出处!感谢作者“小曾看世界”分享! ] 什么是.NET?什么是.NET Fr ...

  3. C#如何根据类的名词创建类的实例

    这个大概分为两种情况:1-在同一程序集访问该类:2-在不同的程序集访问 A:同一程序集,使用微软的创建对象的类:System.Activator: 先通过类名,获取到类型,在使用用于创建本地或远程对象 ...

  4. ASP.NET/MVC/Core的HTTP请求流程

    ASP.NET HTTP管道(Pipeline)模型 1. 先讲一点,再深刻思考 一般我们都在写业务代码,优化页面,优化逻辑之间内徘徊.也许我们懂得HTTP,HTTPS的GET,POST,但是我们大部 ...

  5. 教你如何一键反编译获取任何微信小程序源代码（图形化界面，傻瓜式操作）

    一键获取微信小程序源代码 Tips: 一键获取微信小程序源码, 使用了C#加nodejs制作 直接解压在D盘根目录下后就可以使用 将小程序文件放到 wxapkg目录下3 这个目录下有一些demo 可以 ...

  6. Windows Server 安装后无法使用无线与音频

    1.无线 运行powershell,输入命令: install-windowsfeature Wireless-Networking 之后重启. 运行cmd输入: sc config WlanSvc ...

  7. Windows Server 2016-启用默认Windows搜索服务

    当我们使用Windows Server 2016尝试从开始菜单或基于Windows Server 2016的计算机上的Cortana 搜索时,我们不会收到任何结果或不一致的结果. 原因 默认情况下, ...

  8. SpringCloud警告(Eureka)：EMERGENCY! EUREKA MAY BE INCORRECTLY CLAIMING INSTANCES ARE UP WHEN THEY'RE NOT. RENEWALS ARE LESSER THAN THRESHOLD AND HENCE THE INSTANCES ARE NOT BEING EXPIRED JUST TO BE SAFE.

    警告!Eureka可能存在维护了错误的实例列表(当它们没有启动的时候,Eureka却把它当成启动的了):Renews值小于Threshold值,因此剩下未过期的都是安全的. 原因分析: 这个是Eure ...

  9. JVM监控命令

    1.概述Jcmd是一个诊断Jvm的命令集工具, 集成了包括Jps, Jstack以及采集JFR信息等功能. 它必须运行在被诊断Jvm进程的同一台机器上.1)查询JVM进程及PID/dapeng-con ...

  10. Spring Cloud Eureka 常用配置详解，建议收藏！

    前几天,栈长分享了 <Spring Cloud Eureka 注册中心集群搭建,Greenwich 最新版!>,今天来分享下 Spring Cloud Eureka 常用的一些参数配置及说 ...