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 相关文章推荐
JavaScript面象对象设计
Apr 28 Javascript
javascript 四则运算精度修正函数代码
May 31 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
js中键盘事件实例简析
Jan 10 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 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中的正则表达式函数介绍
2012/02/27 PHP
PHP取整数函数常用的四种方法小结
2012/07/05 PHP
PHP的自定义模板引擎
2017/03/24 PHP
javascript中的delete使用详解
2013/04/11 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
Python实现的中国剩余定理算法示例
2017/08/05 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
JPA的特点
2014/10/25 面试题
工作失误检讨书范文大全
2014/01/13 职场文书
企业党员公开承诺书
2014/03/26 职场文书
捐书倡议书
2014/08/29 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
自主招生自荐信范文
2015/03/04 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书