什么是事件冒泡

<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. asp.net core 系列之用户认证(authentication)

    ASP.NET Core 的 identity 是一种需要用户登录的会员系统,用户可以创建一个登录信息存储在 Identity 的的账号, 或者也可以使用第三方登录,支持的第三方登录包括:Facebo ...

  2. 5G+边缘计算，着眼可见的未来

    在 2019 年 2 月巴塞罗那举办的 MWC(世界移动通讯大会)上,华为手机带来了一款超薄的 5G 折叠屏手机 Mate X.这款手机将折叠屏和 5G 结合在一起,引起了不少人的关注与舆论,而昂贵的 ...

  3. 前端笔记之ES678&Webpack&Babel（上）初识ES678&Babel&let和const&解构&语法

    一.ES版本简介和调试运行方法 1.1 ECMAScript简介 MDN手册:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript JavaS ...

  4. [深度应用]·实战掌握Dlib人脸识别开发教程

    [深度应用]·实战掌握Dlib人脸识别开发教程 个人网站--> http://www.yansongsong.cn/ 项目GitHub地址--> https://github.com/xi ...

  5. Java安全（权限）框架 - Shiro 功能讲解 架构分析

    Java安全(权限)框架 - Shiro 功能讲解 架构分析 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] 简述Shiro Shiro出自公司Apache(阿帕奇),是java的一 ...

  6. 也谈Reactor模式

    何谓Reactor模式?它是实现高性能IO的一种设计模式.网上资料有很多,有些写的也很好,但大多不知其所以然.这里博主按自己的思路简单介绍下,有不对的地方敬请指正. BIO Java1.4(2002年 ...

  7. Data Lake Analytics的Geospatial分析函数

    0. 简介 为满足部分客户在云上做Geometry数据的分析需求,阿里云Data Lake Analytics(以下简称:DLA)支持多种格式的地理空间数据处理函数,符合Open Geospatial ...

  8. 远程连接身份验证错误，又找不到加密Oracle修正

    远程连接服务器出现了错误,错误信息为:远程连接身份验证错误,又找不到加密Oracle修正. 服务器系统:Windows Server2016 客户端系统:Windows10家庭版和专业版   出错原因 ...

  9. N元模型

    在自然语言处理的任务中,拼音纠错.机器翻译等任务都需要对某个句子的下一个单词进行预测,或者评估某个句子的概率大小.例如预测如下句子的下一个单词: Please turn your home work. ...

  10. 从壹开始微服务 [ DDD ] 之四 ║让你明白DDD的小故事 & EFCore初探

    缘起 哈喽大家好哟,今天又到了老张的周二四放送时间了,当然中间还有不定期的更新(因为个人看papi酱看多了),这个主要是针对小伙伴提出的问题和优秀解决方案而写的,经过上周两篇DDD领域驱动设计的试水, ...