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 相关文章推荐
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
jquery实现动态画圆
Dec 04 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
js初始化验证实例详解
Nov 26 Javascript
react实现同页面三级跳转路由布局
Sep 26 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
JavaScript实现简单计算器功能
Dec 19 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 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
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
python判断无向图环是否存在的示例
2019/11/22 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
护士检查书
2014/01/17 职场文书
个人简历自我评价
2014/02/02 职场文书
人事专员的职责
2014/02/26 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
班主任与学生安全责任书
2014/07/25 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
导游词之山海关
2019/12/10 职场文书
详解Python牛顿插值法
2021/05/11 Python
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
MySQL通过binlog恢复数据
2021/05/27 MySQL
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫
java开发双人五子棋游戏
2022/05/06 Java/Android