直入正题,看看下面的代码:
<HTML>
<HEAD>
<style type="text/css">
#outer{
display:block;
width:200px;
height:40px;
background-color:green;
}
#inner{
display:block;
width:200px;
height:40px;
background-color:red;
}
</style>
<script type="text/javascript">
function clickOutSpan(obj, e){
alert("from out source "+obj.id);
var target = e.target || e.srcElement;
alert("from out target "+ target.id);
}
function clickInSpan(obj, e){
alert("from in source "+obj.id);
var target = e.target || e.srcElement;
alert("from in target "+target.id);
}
</script>
</HEAD>
<BODY>
<div>
<span onclick="clickOutSpan(this, event)" id="outer">
<span onclick="clickInSpan(this, event)" id="inner">click me</span>
</span>
</div>
</BODY>
</HTML>
上面代码的特点是内外span大小相同,互相重合。在这种情况下,点击红色区域,会发生什么?
答案:运行后将依次弹出下面信息:"from in source inner","from in target inner", "from out source outer", "from out target inner"。
由上面的运行结果可以看出,事件由内部span向外冒泡,当运行到外部span的时候,虽然传入的obj是外部span对象,但是,event的来源却仍然是内部span。
我们修改下两个span的大小,把外部span扩大。此时点击红色区域又发生什么?答案是效果与上面相同;但如果我们点击绿色部分,即红色区域以外,则只会依次弹出:"from out source outer", "from out target outer"。这说明什么?说明事件不会向下冒泡(这个结论是从实践推理出来的,如果有不同意见,请用事实说服我。:))
如果我们希望在点击内部span的时候只执行本身的click事件而不让外部span的事件也执行呢?只需使用js语句阻止冒泡就可以了。把clickInSpan方法修改成如下样子,
function clickInSpan(obj, e){
alert("from in source "+obj.id);
var target = e.target || e.srcElement;
alert("from in target "+target.id);
if(e.target){
e.cancelBubble = true;
}else{
e.stopPropagation();
}
}
此时再点击红色区域,就不会在有outer的弹出信息。
挺喜欢W3School的那个try it yourself 工具,把代码贴进去运行下吧,很方便。http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_span
哦哦哦,对了,有一个事情不知道是不是要提及一下。这两段代码中方法的名字最原始可不是clickSpan这种的,我图省事直接用的click(),结果点击运行,FF下完全正常,但是IE下却不行,当时以为是“event”冒泡方面的不兼容,结果尝试了半天,发现原来就是不能用click作为方法名。。。(不知道是不是IE把click当关键字了还是啥别的原因,有知道为啥的同学告诉我下)。改成非click的方法就正常了。
分享到:
相关推荐
事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-...
通过这种方式,我们可以确保无论使用哪种事件,都可以有效地阻止事件冒泡并处理滚动到底部或顶部的情况。 总的来说,阻止滚动条事件冒泡是一项常见的前端技术,它可以帮助我们实现更加定制化的滚动交互,比如防止...
06-事件冒泡.html
MIPS-汇编语言-冒泡排序-含伪代码以及完整注释,可以直接使用
解决/阻止 div层内的div层点击事件冒泡触发的小方法 示例代码
07-事件冒泡的作用.html
--C++冒泡排序--
**冒泡排序法详解** 冒泡排序是一种简单直观的排序算法,它重复地遍历待排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。遍历数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经...
本文将深入解析Android中事件捕获和冒泡的流程,帮助开发者更好地理解和运用这一机制。 事件在Android中主要通过View和 ViewGroup对象进行传递。当用户在屏幕上触摸或点击时,系统会生成一个事件对象,如...
排序-按键精灵-冒泡排序
在Java中,我们可以用以下的方式来实现冒泡排序: ```java public class BubbleSort { public static void bubbleSort(int[] arr) { int n = arr.length; for (int i = 0; i < n - 1; i++) { // 外层循环控制...
C语言实践训练-冒泡排序swf动画 用冒泡法对10个学生的C语言成绩由高到低进行排序,并输出最高分和最低分。
### 冒泡排序详解 #### 一、冒泡排序的基本概念与原理 冒泡排序是一种简单的排序算法,其基本思想是通过重复地遍历要排序的列表,比较相邻的两个元素,如果它们的顺序错误就把它们交换过来。遍历列表的工作是重复...
冒泡排序 冒泡排序 冒泡排序 冒泡排序 冒泡排序
12--[冒泡排序].zip源码scratch2.0 3.0编程项目源文件源码案例素材源代码12--[冒泡排序].zip源码scratch2.0 3.0编程项目源文件源码案例素材源代码12--[冒泡排序].zip源码scratch2.0 3.0编程项目源文件源码案例素材源...
1. **避免使用全局变量**:尽管在本例中使用全局变量 `lo` 来存储数组长度看起来很方便,但这种做法并不推荐。更好的做法是将数组长度作为参数传递给需要使用的函数。 2. **使用引用参数**:对于冒泡排序函数,我们...