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 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 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 SPL标准库之接口(Interface)详解
2015/05/11 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
Python线程指南分享
2019/11/19 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
Python requests上传文件实现步骤
2020/09/15 Python
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
计算机专业自荐信
2013/10/14 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
初级职称评定工作总结
2015/08/13 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书