js事件冒泡实例分享(已测试)


Posted in Javascript onApril 23, 2013

网上的例子用的是$(".b").live("click",function(event){} ,jquery自动对live做了处理,阻止了事件冒泡。改成bind,实验就能通过。

< !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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script type="text/javascript" src="http://www.css88.com/tool/css3Preview/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$(".b").bind("click",function(event){ 
$(this).css("color","#FF3300"); 
event.stopPropagation()//注释掉,<SPAN style="BACKGROUND-COLOR: rgb(255,255,255)">效果是不一样的。</SPAN> 
}) 
}); 
</script> 
</head> 
<body> 
<div id="temp"></div> 
<div class="b" style="background:#3ff333">wrapwrapwrapwrapwrapwrapwrap 
<div style="background:#ffff11" class="b">这是公告标题1</div> 
<div style="background:#ffff11" class="b">这是公告标题2</div> 
<div style="background:#ffff11" class="b">这是公告标题3</div> 
<div style="background:#ffff11" class="b">这是公告标题4</div> 
wrapwrapwrapwrapwrapwrapwrap 
</div> 
</body> 
</html>

以上代码中添加与否
event.stopPropagation();
Javascript 相关文章推荐
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
jQuery的deferred对象详解
Nov 12 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
在Mac下彻底卸载node和npm的方法
May 16 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
关于ES6尾调用优化的使用
Sep 11 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 #Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 #Javascript
修改file按钮的默认样式实现代码
Apr 23 #Javascript
js随机颜色代码的多种实现方式
Apr 23 #Javascript
js对象与打印对象分析比较
Apr 23 #Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
Apr 23 #Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 #Javascript
You might like
php中static静态变量的使用方法详解
2010/06/04 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
javascript实现yield的方法
2013/11/06 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
pyqt5之将textBrowser的内容写入txt文档的方法
2019/06/21 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
小学校园之星事迹材料
2014/05/16 职场文书
单位活动策划方案
2014/08/17 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
三八妇女节致辞
2015/07/31 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
Python如何让字典保持有序排列
2022/04/29 Python