什么是事件冒泡

<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. AWVS12 介绍和安装详解 -- For Windows10

    一.AWVS介绍: Acunetix Web Vulnerability Scanner,简称:AWVS,是一个自动化的Web安全测试工具,它可以扫描Web站点和Web应用. AWVS可以快速扫描SQ ...

  2. 鸟哥的Linux私房菜笔记第四章

    前言 对着<鸟哥的Linux私房菜-基础版>做了简化笔记.不想让自己知其然而不知其所然.所以写个博客让自己好好巩固一下,当然不可能把书中的内容全部写下来.在这里就简化一点把命令写下来. 让 ...

  3. Shell学习心得（一）：变量

     1.begin #!/bin/bash echo "Hello World !" #! 是一个约定的标记,它告诉系统这个脚本需要什么解释器来执行,即使用哪一种 Shell. ec ...

  4. 使用 ASP.NET Core MVC 创建 Web API（五）

    使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 使 ...

  5. python微信聊天机器人改进版，定时或触发抓取天气预报、励志语录等，向好友推送

    最近想着做一个微信机器人,主要想要实现能够每天定时推送天气预报或励志语录,励志语录要每天有自动更新,定时或当有好友回复时,能够随机推送不同的内容.于是开始了分析思路.博主是采用了多线程群发,因为微信对 ...

  6. Appium的入门使用

    ps:有没有人和我一样觉得Appium官方文档写的很烂的, 这官方文档,还不如很多人写的博客详细,而且对于初学的入门者实在是不够友好, 官网:https://github.com/appium/jav ...

  7. Asp.NetCore轻松学-配置服务 apollo 部署实践

    前言     Apollo(阿波罗)是携程框架部门研发的分布式配置中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性,适用于微服务配置 ...

  8. SQL内模糊查询语句拼接时单引号'问题

    下面以存储过程查询所有为例,非存储过程(或不是查询所有将*替换为你想要查询的列即可)更为简单, 语法:select * from 表名 where 列名like'%条件%' 拼接后的set @变量名 ...

  9. Windows系统桌面右击反应变慢、卡顿问题解决方法

    博主的电脑是Win10系统,在修改完系统的用户文件夹名后,桌面右击出现了反应卡顿的现象,并且点击输入法,也变得卡顿.问题解决后,于是想简单记录一下. 还是注册表的问题,使用Win+R快捷键,打开运行, ...

  10. js取数组最大值的四种方式

    var arr = [7,2,0,-3,5];1.apply()应用某一对象的一个方法,用另一个对象替换当前对象 var max = Math.max.apply(null,arr);console. ...