dom阻止事件冒泡
通常有两种事件流模型,一种是冒泡,一种是捕获。顾名思义,冒泡就是从内往外传播,捕获就是从外往里传播。
对于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阻止事件冒泡的更多相关文章
- 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
- js区分鼠标单双击 阻止事件冒泡
function clickOrDblClick(obj) { count++; if (obj != undefined) { var rowStr = $.trim($(obj).find(&qu ...
- JQuery阻止事件冒泡---阻止后续代码执行
(1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...
- JS如果阻止事件冒泡和浏览器默认事件
原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...
- React 中阻止事件冒泡的问题
在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达 ...
- vue2.0阻止事件冒泡
<!--picker弹窗--><transition name="fade"> <div class="picker_wrap" ...
- 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别
1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...
- js阻止事件冒泡的两种方法
1.什么是JS事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...
- JavaScript事件冒泡机制和阻止事件冒泡及默认事件
一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true: FF下:event ...
随机推荐
- 高性能JavaScript(字符串和正则表达式)
字符串连接 +/+=操作符连接 str += "one" + "two"; 这是常用的连接字符串的方法,它运行的时候会经历下面四个步骤: 1.在内存中创建一个临 ...
- JS--我发现,原来你是这样的JS(四)(看看变量,作用域,垃圾回收机制是啥)
一.介绍 这是红宝书(JavaScript高级程序设计 3版)的读书笔记第四篇,是红宝书第四章内容(主要是变量和作用域问题),当然其中还有我个人的理解.红宝书这本书可以说是难啃的,要看完不容易,挺厚的 ...
- Java程序流程控制:判断结构、选择结构、循环结构
本文内容: 判断结构 if 选择结构 switch 循环结构 while do-while for for each break.continue return 首发时间:2017-06-22 21: ...
- Windows桌面.exe程序安装、卸载、升级测试用例
一.安装 1) 系统:XP.win 7.win 8.win 10 2)安全类型软件:360杀毒.360安全卫士.金山毒霸.百度杀毒.腾讯电脑管家等. 3)同类型软件兼容 4)用户名称:中文用户.英文用 ...
- 【转】JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
- qq会员权益
1.功能特权qq会员可以获得增加好友上限.QQ等级加速.创建2000人群.创建1000人群.表情漫游.云消息服务.离线传文件.网络相册.靓号抵用卷.文件中转站这10个方面的福利当然会员和超级会员在上面 ...
- Oracle 当数据库的表没有drop操作就可以通过如下方式恢复表数据
--执行下列语句可查询出相关时间点 select * from sys.smon_scn_time order by time_dp desc; --执行下列语句可将某个时间点的数据恢复 insert ...
- python自学——文件处理(强制刷新)
# 文件的刷新flash# 为什么要刷新文件呢?# 首先我们就要知道电脑是怎么储存信息的,# 写的代码保存在缓存中当缓存满了之后就会将内容储存到硬盘中. # 那这个跟刷新有什么关系呢?# 系统也会自动 ...
- Linux内核同步机制之completion【转】
Linux内核同步机制之completion 内核编程中常见的一种模式是,在当前线程之外初始化某个活动,然后等待该活动的结束.这个活动可能是,创建一个新的内核线程或者新的用户空间进程.对一个已有进程的 ...
- unknown host www.baidu.com 解决方法
今晚一开机发现无法更新yum了,本机是连着wife的,咋无法更新呢,作为小白,一脸懵逼.于是ping了一下百度,网络不可达.... 于是我查看了一下DNS,发现设置了,于是看了一下物理机的DNS,发现 ...