通常有两种事件流模型,一种是冒泡,一种是捕获。顾名思义,冒泡就是从内往外传播,捕获就是从外往里传播。

对于dom事件,就是这样的。比如,有两个父子div。

<div id="pdiv"  style="border: 1px solid red;width: 100px;height: 200px;">

    <div id="cdiv" style="border: 1px solid blue;width: 50px;height: 50px;">

    </div>

</div>

当点击cdiv块的时候,冒泡就意味着,从cdiv向pdiv传播,cdiv是在里边的元素。同理,捕获就是从pdiv向cdiv传播。现代流行的浏览器都支持冒泡,基本上推荐事件冒泡。

有了事件流,就带来了问题,如果cdiv和pdiv在页面加载时,都被赋予了点击事件,此时我点击cdiv的时候,我只希望执行cdiv的事件,而不想让它执行pdiv上的事件。

怎么办呢?此时,就需要阻止事件冒泡了。

比如:

 $(function(){

             $('#pdiv').click(function(e){
alert(this.id);
}); $('#cdiv').click(function(e){
alert(this.id);
e.stopPropagation();
}); });

如果注释掉第10行代码,点击cdiv的时候,就会先alert出cdiv,然后冒泡到pdiv。

在cdiv上进行阻止冒泡e.stopPropagation(),这样就只会alert出cdiv。

这个方法是阻止事件的传播,包括冒泡和捕获。通常在事件冒泡用即可。特殊情况再用在捕获。

dom阻止事件冒泡的更多相关文章

  1. 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别

    今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

  2. js区分鼠标单双击 阻止事件冒泡

    function clickOrDblClick(obj) { count++; if (obj != undefined) { var rowStr = $.trim($(obj).find(&qu ...

  3. JQuery阻止事件冒泡---阻止后续代码执行

    (1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...

  4. JS如果阻止事件冒泡和浏览器默认事件

    原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...

  5. React 中阻止事件冒泡的问题

    在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达 ...

  6. vue2.0阻止事件冒泡

    <!--picker弹窗--><transition name="fade"> <div class="picker_wrap" ...

  7. 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

    1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...

  8. js阻止事件冒泡的两种方法

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

  9. JavaScript事件冒泡机制和阻止事件冒泡及默认事件

    一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true:  FF下:event ...

随机推荐

  1. 【代码笔记】iOS-只让textField使用键盘通知

    代码: #import "ViewController.h" @interface ViewController () @end @implementation ViewContr ...

  2. css中计数器的实现-笔记

    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485533&idx=1&sn=e88dc5fffa6 ...

  3. JAVA后端笔试试题(一)

    2017年6月7日,天气晴转阴.心情还不错. 上周六参加了自己的第一场笔试,感觉很糟糕,主要是对基础知识掌握不扎实,现在把笔试中的部分问题总结归纳如下,便于以后查看. 1.GC是什么?为什么要GC? ...

  4. readlink 命令

    在Linux中readlink命令的作用是:输出符号链接值或权威文件名(通常使用的是-f参数) 格式:readlink [选项]... 文件 参数:   -f, --canonicalize 递归跟随 ...

  5. [iOS] UICollectionView实现图片水平滚动

    最新更新: 简单封装了一下代码,参考新文章:UICollectionView实现图片水平滚动 先简单看一下效果: 新博客:http://wossoneri.github.io 准备数据 首先先加入一些 ...

  6. sql server中quotename()函数的用法(转载)

    操作sql server尤其是写存储过程时,要用到各种各样的函数,今天就总结一个quotename()的用法.1.语法: quotename('character_string'[,'quote_ch ...

  7. Python3部分Print输出格式

    print("Hello World!") #直接打印字符串 print('Hello World!') #对于python,单引号也可以表示字符串 name = 'Tom' #自 ...

  8. 【存在问题,待修改】SSH 远程登陆

    0. 前提 设置 hosts 参考链接 Linux 配置 hosts SSH公钥登录原理 1. SSH 是什么 SSH ( Secure Shell ) 是一种协议标准,其目的是实现安全远程登录以及其 ...

  9. 【史上最全】申请配置阿里云服务器,并部署IIS和开发环境,项目上线经验

    最近一年在实验室做web后端开发,涉及到一些和服务器搭建及部署上线项目的相关经验,写个帖子和小伙伴们分享,一同进步! 首先谈一下,为什么越来越多中小型公司/实验室,部署项目的趋势都是在云服务器而不是普 ...

  10. PHP中unset,array_splice删除数组中元素的区别

    php中删除数组元素是非常的简单的,但有时删除数组需要对索引进行一些排序要求我们会使用到相关的函数,这里我们来介绍使用unset,array_splice删除数组中的元素区别吧 如果要在某个数组中删除 ...