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 相关文章推荐
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
跟我学习javascript的this关键字
May 28 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
vue移动端使用canvas签名的实现
Jan 15 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
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 中文和编码判断代码
2010/05/16 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
PHP CURL使用详解
2019/03/21 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
vue二级路由设置方法
2018/02/09 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
Python Websocket服务端通信的使用示例
2020/02/25 Python
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
留学推荐信写作指南
2014/01/25 职场文书
2014年教师节寄语
2014/04/03 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
党代会心得体会
2014/09/04 职场文书
离职信范本
2015/06/23 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
开学第一天的感想
2015/08/10 职场文书