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 ...
随机推荐
- python常用模块-01
1. 简单了解模块 写的每一个py文件都是一个模块. 还有一些我们一直在使用的模块 buildins 内置模块. print, input random 主要是和随机相关的内容 random() ...
- MySQL数据库图文安装详解及相关问题
(尊重劳动成果,转载请注明出处: http://blog.csdn.net/qq_25827845/article/details/53366444冷血之心的博客) 首先说明:安装目录中不能有中文和空 ...
- svn目标计算机主动拒绝
这两天上传文件到服务器端,总是提示“ 目标计算机主动拒绝”. 后来排查,是受到360杀毒软件的文件系统实时防护功能影响. 虽然服务器端已经将仓库目录添加进360杀毒的白名单,但随着用户不断更新文件,文 ...
- 为什么不建议给域名裸域添加CNAME记录
很多提供权威 DNS 解析的服务商都不提供域名裸域又叫根域(root record)的 CNAME 解析,有些即使提供了也会在你添加裸域的 CNAME 记录时给你一个警告提醒. 万网的权威 DNS 解 ...
- MySQL分析函数实现
| MySQL分析函数实现还好MySQL8.0已经实现了与Oracle相同的分析函数. 1. 实现rownumSET @rn:=0;SELECT @rn:=@rn+1 AS rownum ,e.* F ...
- MySQL自带的性能压力测试工具mysqlslap
mysqlslap是从MySQL的5.1.4版开始就开始官方提供的压力测试工具. 通过模拟多个并发客户端并发访问MySQL来执行压力测试,同时提供了较详细的SQL执行数据性能报告,并且能很好的对比多个 ...
- 【转】Python学习---Socket通信原理以及三次握手和四次挥手详解
[原文]https://www.toutiao.com/i6566024355082404365/ 什么是Socket? Socket的中文翻译过来就是"套接字".套接字是什么,我 ...
- kubeadm快速部署Kubernetes单节点
1. 安装要求 在开始之前,部署Kubernetes集群机器需要满足以下几个条件: 一台或多台机器,操作系统 CentOS7.x-86_x64 硬件配置:2GB或更多RAM,2个CPU或更多CPU,硬 ...
- TruncateATable 清除一张表
当我们想删除一张表的全部数据时,我们可以使用 truncate 关键字,但如果要删除的表的主键被引用了,那么就无法执行语句. 1.制作清除数据的工具 ,在 nuget 控制台中输入 Install-P ...
- 028、HTML 标签3表单标签插入组件
内容:表单标签插入组件(经常使用)############################################################## form表单标签和input组件 < ...