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 21 Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 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
多重?l件?合查?(一)
2006/10/09 PHP
php网站地图生成类示例
2014/01/13 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
js 上传图片预览问题
2010/12/06 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
Python中的XML库4Suite Server的介绍
2015/04/14 Python
Python 探针的实现原理
2016/04/23 Python
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
详解Python3 pandas.merge用法
2019/09/05 Python
Django实现网页分页功能
2019/10/31 Python
python之array赋值技巧分享
2019/11/28 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
旷工辞退通知书
2015/04/17 职场文书
python实现进度条的多种实现
2021/04/29 Python
Python访问Redis的详细操作
2021/06/26 Python