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实现的网页局布刷新效果
Dec 01 Javascript
由document.body和document.documentElement想到的
Apr 13 Javascript
比较简单的异步加载JS文件的代码
Jul 18 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 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
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
php中的静态变量的基本用法
2014/03/20 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
移动节点的jquery代码
2014/01/13 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
Python中模块与包有相同名字的处理方法
2017/05/05 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
Python列表切片常用操作实例解析
2019/12/16 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
党员个人查摆剖析材料
2014/10/16 职场文书
表扬通报怎么写
2015/01/16 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
导游词之湖北武当山
2019/09/23 职场文书
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL