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效率调优经验
Jun 04 Javascript
event对象的方法 兼容多浏览器
Jun 27 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
简单实现js页面切换功能
Jan 10 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 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
晶体管来复再生式二管收音机
2021/03/02 无线电
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
ThinkPHP缓存方法S()概述
2014/06/13 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
javascript parseInt 函数分析(转)
2009/03/21 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
基于vue组件实现猜数字游戏
2020/05/28 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
python多线程编程方式分析示例详解
2013/12/06 Python
python计算对角线有理函数插值的方法
2015/05/07 Python
详解Python发送邮件实例
2016/01/10 Python
代码分析Python地图坐标转换
2018/02/08 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
详解Python 循环嵌套
2020/07/09 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
python 实现IP子网计算
2021/02/18 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
英语简历自我评价
2014/01/26 职场文书
春节晚会主持词
2014/03/24 职场文书
护林防火标语
2014/06/27 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书