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 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 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网上调查系统
2006/10/09 PHP
php ftp文件上传函数(基础版)
2010/06/03 PHP
Textarea根据内容自适应高度
2013/10/28 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
python中set()函数简介及实例解析
2018/01/09 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
临床医学大学生求职信
2013/09/28 职场文书
医院搬迁方案
2014/06/14 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
毕业班工作总结
2015/08/10 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python