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创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
基于Vue的延迟加载插件vue-view-lazy
May 21 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 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
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
PHP的SQL注入过程分析
2012/01/06 PHP
常用PHP框架功能对照表
2014/10/23 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
javascript+mapbar实现地图定位
2010/04/09 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
JS简单计算器实例
2015/01/20 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
Python3实现从文件中读取指定行的方法
2015/05/22 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
简短证婚人证婚词
2014/01/09 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server
docker 制作mysql镜像并自动安装
2022/05/20 Servers