文档章节

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

乐派电影
 乐派电影
发布于 2014/04/10 23:29
字数 577
阅读 655
收藏 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(块级格式化上下文)

© 著作权归作者所有

乐派电影

乐派电影

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

评论(2)

乐派电影
乐派电影

引用来自“willqiqi”的评论

不错

[0]

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

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

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

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

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

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

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

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

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

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

furw
2015/08/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

FPGA 设备 USB Platform Cable USB

lsusbFuture Technology Devices International, Ltd FT232H Single HS USB-UART/FIFO IC

MtrS
今天
4
0
lua web快速开发指南(6) - Cache、DB介绍

"数据库"与"缓存"的基本概念 数据库与缓存是服务端开发人员的必学知识点. 数据库 "数据库"是一种信息记录、存取的虚拟标记地点的集合统称. 比如现实生活中, 我们经常会用到文件柜、书桌等等数...

水果糖的小铺子
今天
7
0
Oracle分页查询语句的写法

Oracle分页查询语句的写法 Oracle分页查询语句使我们最常用的语句之一,下面就为您介绍的Oracle分页查询语句的用法,Oracle分页查询语句基本上可以按本文给出的格式来进行套用。   Oracle分...

康师傅
昨天
5
0
java并发图谱

1527
昨天
2
0
Mybatis之拦截器Interceptor

使用mybatis时用PageHelper进行分页,用到了PageInterceptor,借此了解下mybatis的interceptor。Mybatis的版本是3.4.6,MybatisHelper的版本是5.1.3。 1、PageInterceptor 先上一段代码,如下...

克虏伯
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部