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实现轮显新闻标题链接
Aug 13 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
jquery删除指定子元素代码实例
Jan 13 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
JS原型对象操作实例分析
Jun 06 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
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
PyMongo安装使用笔记
2015/04/27 Python
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
Python函数装饰器实现方法详解
2018/12/22 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
pytorch中的inference使用实例
2020/02/20 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
django 读取图片到页面实例
2020/03/27 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
航空学院求职信
2014/06/11 职场文书
文秘应届生求职信
2014/07/05 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
2015学校年度工作总结
2015/05/11 职场文书