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();
相关文章
这篇文章主要介绍了ES6 javascript的异步操作,结合实例形式分析了ES5中异步操作的概念、原理、使用方法及相关注意事项,需要的朋友可以参考下2017-10-10
悬浮窗就是图中微信图标的按钮，采用fixed定位，可拖动和点击。本文给大家分享一个比较常见的常见，通过实例代码给大家介绍微信小程序中悬浮窗功能的实现，一起看看吧2019-08-08
下面小编就为大家分享一篇js断点调试心得，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
JavaScript 节点操作 以及DOMDocument属性和方法
最近发现DOMDocument对象很重要,还有XMLHTTP也很重要 注意大小写一定不能弄错.2007-12-12
bootstrap弹出层有多种触发方式，以下是我用到的bootstrap的两种模态框方式，需要的的朋友参考下吧2017-05-05
这篇文章主要为大家详细介绍了JavaScript实现数值自动增加动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
复制本贴标题和地址，发给QQ|Msn上的好友的代码，方便利用用户宣传的js2008-07-07
javascript setTimeout()传递函数参数(包括传递对象参数)
由于需要，我要用到setTimeout（）并且在里边的函数参数传递一个参数，就像这样setTimeout（"fun(参数)", 1000）。但是以我这种写法，js会报错，说‘参数’未定义。2010-04-04
这篇文章主要为大家详细介绍了javascript使用canvas实现饼状图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了json实现添加、遍历与删除属性的方法,结合简单实例形式分析了json常见的添加、遍历与删除操作相关技巧,需要的朋友可以参考下2016-06-06
最新评论