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 &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
将json对象转换为字符串的方法
Feb 20 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
Vue.js中的组件系统
May 30 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 Javascript
swiper实现导航滚动效果
Dec 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
PHP生成带有雪花背景的验证码
2006/10/09 PHP
开发大型 PHP 项目的方法
2007/01/02 PHP
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
JS 自动安装exe程序
2008/11/30 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
python在linux中输出带颜色的文字的方法
2014/06/19 Python
Python selenium文件上传方法汇总
2020/11/19 Python
python语言基本语句用法总结
2019/06/11 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
python map比for循环快在哪
2020/09/21 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
中海讯通笔试题
2015/09/15 面试题
校园报刊亭创业计划书
2014/01/02 职场文书
酒店总经理助理岗位职责
2014/02/01 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL
css3 文字断裂效果
2022/04/22 HTML / CSS