js事件冒泡实例分享(已测试)
更新时间：2013年04月23日 16:34:08 作者：
js事件冒泡实例：摘的网上的例子，但是他写的有错误，自己改正了下，已验证通过，感兴趣的朋友可以参考下哈
网上的例子用的是$(".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();
复制代码 代码如下:
< !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();
相关文章
这篇文章主要介绍了微信小程序12行js代码自己写个滑块功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-07-07
接近过年了，支付宝的集福的活动又开始了，集美们的五福集齐了没有。每年的集福活动都有一些小游戏，今年也不例外，画年画就是其中之一，本篇用canvas来写一个画年兔的游戏2023-01-01
这篇文章主要介绍了如何使用JavaScript对HTML中的元素和任意DOM元素进行等比缩放,通过获取容器或元素的尺寸信息,计算缩放比例,并应用CSS变换（transform属性）来实现等比缩放,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-01-01
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
这篇文章主要介绍了使用JS实现jQuery的addClass, removeClass, hasClass函数功能,需要的朋友可以参考下2014-10-10
最近开发项目时,常碰到“用户在一定时间内无任何操作时,跳转到某个页面”的需求,所以本文就来使用JavaScript实现这一要求,需要的可以参考下2024-03-03
这篇文章主要介绍了使用webpack搭建vue项目实现脚手架功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了js实现精确到秒的日期选择器,以完整实例形式分析了JavaScript日期选择器的实现步骤与相关技巧,涉及JavaScript针对时间与日期的相关运算,需要的朋友可以参考下2016-04-04
用js获取文件目录的代码，一般主要是用了区别vbs的一些代码2008-11-11
这篇文章主要介绍了JS实现消息来时让网页标题闪动效果的方法,实例分析了JavaScript基于时间函数动态操作页面元素的技巧,并附带了开心网的标题闪动解决方案,需要的朋友可以参考下2016-04-04
Javascript 数组添加一个 indexOf 方法的实现代码
Javascript 的字符串有个 indexOf 的方法，能够返回字符在指定的字符串中的位置，非常有用，本文介绍了如何给 Javascript 数组也添加一个类似的方法。2009-09-09
最新评论