JS冒泡事件的快速解决方法


Posted in Javascript onDecember 16, 2013

何为冒泡事件
就是当设定了多个div的嵌套时;即建立了父子关系,当父div与子div共同加入了onclick事件时,当触发了子div的onclick事件后,子div进行相应的js操作。但是父div的onclick事件同样会被触发。这就造成了事件的多层并发,导致了页面混乱。这就是冒泡事件。

消除冒泡事件的方法
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)

下面的一段代码即可以很好的解释是么是冒泡效果,什么叫消除冒泡效果

<html> 
<head> 
<title> 阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)</title> 
<meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" /> 
<script type="text/javascript"> 
function doSomething (obj,evt) { 
alert(obj.id); 
var e=(evt)?evt:window.event; //判断浏览器的类型,在基于ie内核的浏览器中的使用cancelBubble
if (window.event) { 
e.cancelBubble=true; 
} else { 
//e.preventDefault(); //在基于firefox内核的浏览器中支持做法stopPropagation
e.stopPropagation(); 
} 
} 
</script> 
</head> 
<body> 
<div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow"> 
<p>This is parent1 div.</p> 
<div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange"> 
<p>This is child1.</p> 
</div> 
<p>This is parent1 div.</p> 
</div> 
<br /> 
<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;"> 
<p>This is parent2 div.</p> 
<div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;"> 
<p>This is child2. Will bubble.</p> 
</div> 
<p>This is parent2 div.</p> 
</div> 
</body> 
</html>

把代码直接复制后,打开当点击child1时不仅会弹出 child1 对话框还会弹出 parent1

这就是冒泡事件

但是单击chile2只会弹出child2却不会弹出 parent2,这便是应用了阻止冒泡事件的特效的效果.

Javascript 相关文章推荐
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
Jan 02 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
基于vue.js无缝滚动效果
Jan 25 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
JS批量操作CSS属性详细解析
Dec 16 #Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 #Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 #Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 #Javascript
js获取url中指定参数值的示例代码
Dec 14 #Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 #Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 #Javascript
You might like
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
react中的ajax封装实例详解
2017/10/17 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
python解析json实例方法
2013/11/19 Python
python实现一次创建多级目录的方法
2015/05/15 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
python实现移位加密和解密
2019/03/22 Python
django+echart数据动态显示的例子
2019/08/12 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
python 元组的使用方法
2020/06/09 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
PHP开发的一般流程
2013/08/13 面试题
database面试题
2013/03/28 面试题
公司授权委托书格式样本
2014/10/01 职场文书
党支部对转正的意见
2015/06/02 职场文书
初二物理教学反思
2016/02/19 职场文书
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android
MySQL 数据类型详情
2021/11/11 MySQL