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 相关文章推荐
JS 常用校验函数
Mar 26 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 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
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
javascript 函数参数限制说明
2010/11/19 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
Python学习笔记之常用函数及说明
2014/05/23 Python
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
详解python while 函数及while和for的区别
2018/09/07 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
小结Python的反射机制
2020/09/28 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
主治医师岗位职责
2013/12/10 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
学习保证书范文
2014/04/30 职场文书
承诺函范文
2015/01/21 职场文书
分享Python异步爬取知乎热榜
2022/04/12 Python