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 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 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
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
分析JS单线程异步io回调的特性
2017/12/01 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
详解Python的Django框架中的templates设置
2015/05/11 Python
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
后勤主管岗位职责
2014/03/01 职场文书
家庭贫困证明
2014/09/23 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
给下属加薪申请报告
2015/05/15 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang