什么是事件冒泡

<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. 【STM32H7教程】第11章 STM32H7移植SEGGER的硬件异常分析

    完整教程下载地址:http://forum.armfly.com/forum.php?mod=viewthread&tid=86980 第11章       STM32H7移植SEGGER的硬 ...

  2. tomcat部署服务乱码问题

    first:win+R -->输入regedit 打开注册列表HKEY_CURRENT_USER-->Console-->Tomcat-->CodePage修改成十进制6500 ...

  3. Redis in .NET Core 入门：(2) String

    第1篇:https://www.cnblogs.com/cgzl/p/10294175.html‘ 本文简单介绍一下Redis的常用数据类型String. 基本上都是文档上的内容,所以比较无聊.... ...

  4. 【.NET异步编程系列2】掌控SynchronizationContext避免deadlock

    引言: 多线程编程/异步编程非常复杂,有很多概念和工具需要去学习,贴心的.NET提供Task线程包装类和await/async异步编程语法糖简化了异步编程方式. 相信很多开发者都看到如下异步编程实践原 ...

  5. SpringBoot之旅第三篇-日志

    一.前言 日志对于一个系统的重要性不言而喻,日志能帮我们快速定位线上问题,市场上存在非常多的日志框架,比较常见的有 JUL,JCL,Log4j,Log4j2,Logback.SLF4j.jboss-l ...

  6. 强化学习(十九) AlphaGo Zero强化学习原理

    在强化学习(十八) 基于模拟的搜索与蒙特卡罗树搜索(MCTS)中,我们讨论了MCTS的原理和在棋类中的基本应用.这里我们在前一节MCTS的基础上,讨论下DeepMind的AlphaGo Zero强化学 ...

  7. 学习python的第三天

    4.28日总结 一.关于python 1.交互式 说一句解释一句 2.命令行式 1.编写文件并且保存 2.打开python解释器,在pyrhon中打开文本,读入内存(python打开的时候,翻译不是瞬 ...

  8. win10环境下如何运行debug

    在学习汇编的时候,会需要用到debug调试程序,但是现在win10默认已经移除了这个插件,我们需要手动安装,下面就告诉大家如何在win10环境下安装debug. 1:准备工具 1.1 DOSBox 1 ...

  9. 删除Oracle用户及表空间

    --转载自 https://blog.csdn.net/sunny05296/article/details/81126548--以sysdba用户登录,查找需要删除的用户conn / as sysd ...

  10. 秋季学期学习总结&&以及下学期的期待

    秋季总结 第一学期已经结束了,下面来分点归纳下知识点: ·基础编程:利用c语言来进行编程 ·分支结构:利用if-else语句和switch语句编程,以及字符型数据的利用 ·循环结构:利用while.d ...