阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)


Posted in Javascript onMay 08, 2007

cancelBubble在IE下有效
stopPropagation在Firefox下有效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">  
<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;  
 if (window.event) {  
 e.cancelBubble=true;  
 } else {  
 //e.preventDefault();  
 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> 
Javascript 相关文章推荐
js left,right,mid函数
Jun 10 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
常用的js方法合集
Mar 10 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
uni-app如何页面传参数的几种方法总结
Apr 28 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 Javascript
延时重复执行函数 lLoopRun.js
May 08 #Javascript
用js判断浏览器是否是IE的比较好的办法
May 08 #Javascript
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 #Javascript
javascript之水平横向滚动歌词同步的应用
May 07 #Javascript
javascript之ESC(第二类混淆)
May 06 #Javascript
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 #Javascript
使用正则替换变量
May 05 #Javascript
You might like
第十一节--重载
2006/11/16 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
python进阶教程之模块(module)介绍
2014/08/30 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
pandas中ix的使用详细讲解
2020/03/09 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
2014年秋季新学期寄语
2014/08/02 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
考试作弊检讨书
2015/01/27 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android
青岛市的收音机研制与生产
2022/04/07 无线电