阻止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获取class的所有元素
Mar 28 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
angularJS 中$scope方法使用指南
Feb 09 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
原生JS进行前后端同构
Apr 22 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
详解javascript脚本何时会被执行
Feb 05 Javascript
js判断两个数组相等的5种方法
May 06 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
PHP中上传大体积文件时需要的设置
2006/10/09 PHP
PHP网站备份程序代码分享
2011/06/10 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
php中session定期自动清理的方法
2015/11/12 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
JavaScript实现开关等效果
2017/09/08 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
Python中的装饰器用法详解
2015/01/14 Python
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
理解python正则表达式
2016/01/15 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
分析经典Python开发工程师面试题
2019/04/08 Python
对于Python深浅拷贝的理解
2019/07/29 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
pycharm永久激活超详细教程
2020/10/29 Python
什么是GWT的Entry Point
2013/08/16 面试题
厨房管理计划书
2014/04/27 职场文书
公司节能减排方案
2014/05/16 职场文书
导师工作推荐信范文
2014/05/17 职场文书
三八妇女节主持词
2015/07/04 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技