文档章节

什么是事件冒泡?如何用jquery/js阻止事件冒泡?阻止冒泡有什么作用?小生来抛个砖。

乐派电影
 乐派电影
发布于 2014/04/10 23:29
字数 577
阅读 658
收藏 10

    前言:有时候,当我们给一个外层 div 添加了一个‘click’事件,然而在内层的其他元素我们也为它添加了 ‘click’事件,那么当我们点击内层的元素时,外层的事件会响应吗?接下来我们就来一步一步解开这个问题吧!

    一、准备: 这里是一个三层模型

    <!--cs-->
    <div class="outer">
        <div class="inner">
            <button class="btn">点击我</button>
        </div>
    </div>

     样式图:

    二、分别绑定事件:

       $(function(){
            $('.outer').on('click', function(){
              console.log('我是最外面的DIV, 时间: ' + new Date().getMilliseconds());
            });
            $('.inner').on('click', function(){
                console.log('我是最里面的DIV, 时间: ' + new Date().getMilliseconds());
            });
            $('.btn').on('click', function(){
                console.log('我是按钮哦!, 时间: ' + new Date().getMilliseconds());
            });
       });

   三、 点击中间的按钮后:

    四、现象:可以看见基本上是同一时间执行了,‘btn’上面的所有绑定了 ‘click’元素的click事件。这就是事件的冒泡带来的影响!要避免这样的现象发生,首先我们要清楚自己的目的是什么!这样就能很好的解决这个问题了,好了,废话不多说,return main;

    五、阻止:

        jQuery方式一,通过 返回 false 实现

            $('.btn').on('click', function(){
                console.log('我是按钮哦!, 时间: ' + new Date().getMilliseconds());
                return false; //阻止事件冒泡传播
            });

        方式二, 使用函数 event.stopPropagation();

            $('.btn').on('click', function(){
                console.log('我是按钮哦!, 时间: ' + new Date().getMilliseconds());
                event.stopPropagation();
            });

    六、结果验证:

    七、总结:

            1.一个事件起泡对应触发的是上层的同一事件 
            特殊:如果 outer 设置成双击事件,那么在你单击 btn 的时候就会起泡触发btn 和 inner 单击的事件 (这里注意双击包含单击)。 
            2.如果在click事件中,在你要处理的事件之前加上e.preventDefault(); 那么就取消了默认行为(通俗理解:相当于做了个return操作),不执行之后的语句了。(和阻止冒泡不是一回事);                                                     3.e.stopPropagation()只要在click事件中,就不会触发上层click事件。

    预告: 下一篇应该是BFC(块级格式化上下文)

© 著作权归作者所有

乐派电影

乐派电影

粉丝 134
博文 39
码字总数 18922
作品 1
成都
后端工程师
私信 提问
加载中

评论(2)

乐派电影
乐派电影 博主

引用来自“willqiqi”的评论

不错

[0]

willqiqi
willqiqi
不错
总结jquery使用事件(复合事件、事件绑定等)

本文整理总结jquery事件,在使用jquery开发中,一定会使用到事件,下面是常用的事件。 1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种...

^6^|^6^
2011/12/09
429
0
JQuery DOM 事件冒泡

什么是冒泡 在页面上可以有多个事件,也可以多个元素响应同一个事件。假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了click事件,同时body元素上也绑定了click事件。...

尐桀
2012/08/20
258
0
阻止事件冒泡和浏览器的默认行为

javascript 1.阻止事件冒泡,使成为捕获型事件触发机制. function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器if ( e && e.stopPropagation ) //因此它支持W3C的stopPropaga...

JellyFlower
2014/06/27
550
0
JavaScript事件机制——记一次认真准备的技术分享

先问几个问题,你是否能快速闪过答案? 自下而上(冒泡)事件怎么写,自上而下(捕获)又是怎么写? 捕获型和冒泡型同时存在,谁生效? jquery的on或bind是冒泡,还是捕获? 冒泡能够阻止,那...

闲淡超人
2018/06/20
0
0
jquery 事件冒泡的介绍以及如何阻止事件冒泡

什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,...

furw
2015/08/07
90
0

没有更多内容

加载失败,请刷新页面

加载更多

官方来源的 Duo Mobile App 解决了我的 Network Difficulties 问题

https://help.duo.com/s/article/2094?language=en_US 我利用百度搜索下载了一个 Duo Mobile App (由于 Google Play)在大陆不可用。 在扫描旧手机上的 Duo Mobile App 的二维码时, 显示出错...

圣洁之子
17分钟前
3
0
Zabbix监控Mysql容器(Docker容器)主从是否存活

1、在Zabbix Web端创建模板 2、为该模板创建监控项 3、创建触发器 4、在zabbix-agent端操作 在/etc/zabbix/zabbix_agentd.d新建customize.confw文件 内容如下 UserParameter=mysql.replicat...

abowu
18分钟前
2
0
基于 RocketMQ 的同城双活架构在美菜网的挑战与实践

本文整理自李样兵在北京站 RocketMQ meetup分享美菜网使用 RocketMQ 过程中的一些心得和经验,偏重于实践。 嘉宾李样兵,现就职于美菜网基础服务平台组,负责 MQ ,配置中心和任务调度等基础...

大涛学长
24分钟前
3
0
设计模式之:外观模式和桥接模式

作者:DevYK 链接:https://juejin.im/post/5d7e01f4f265da03b5747aac 外观模式 介绍 外观模式 (Facade) 在开发过程中的运用评率非常高,尤其是在现阶段,各种第三方 SDK “充斥” 在我们周边...

Java架构Monster
25分钟前
2
0
人证合一核验设备

人脸身份验证机,人证合一设备1:N如我们现在在车站或一些重要的场所如步行街、城中村等人流密集的场所应用的人脸识别布控系统,其特点是动态和非配合。所谓的动态也就是识别的不是照 片,不是...

非思丸智能
27分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部