`
DBear
  • 浏览: 231134 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类

用事实说话---看看事件冒泡

阅读更多

    直入正题,看看下面的代码:

 

<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-事件冒泡jquery-...

    阻止滚动条事件冒泡

    通过这种方式,我们可以确保无论使用哪种事件,都可以有效地阻止事件冒泡并处理滚动到底部或顶部的情况。 总的来说,阻止滚动条事件冒泡是一项常见的前端技术,它可以帮助我们实现更加定制化的滚动交互,比如防止...

    06-事件冒泡.html

    06-事件冒泡.html

    MIPS-汇编语言-冒泡排序-含伪代码以及完整注释

    MIPS-汇编语言-冒泡排序-含伪代码以及完整注释,可以直接使用

    解决点击事件冒泡

    解决/阻止 div层内的div层点击事件冒泡触发的小方法 示例代码

    07-事件冒泡的作用.html

    07-事件冒泡的作用.html

    --C++冒泡排序--

    --C++冒泡排序--

    C语言排序算法---冒泡排序法

    **冒泡排序法详解** 冒泡排序是一种简单直观的排序算法,它重复地遍历待排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。遍历数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经...

    Android-传统事件捕获和冒泡的流程解析

    本文将深入解析Android中事件捕获和冒泡的流程,帮助开发者更好地理解和运用这一机制。 事件在Android中主要通过View和 ViewGroup对象进行传递。当用户在屏幕上触摸或点击时,系统会生成一个事件对象,如...

    排序-按键精灵-冒泡排序.png

    排序-按键精灵-冒泡排序

    排序算法 -- 冒泡排序

    在Java中,我们可以用以下的方式来实现冒泡排序: ```java public class BubbleSort { public static void bubbleSort(int[] arr) { int n = arr.length; for (int i = 0; i &lt; n - 1; i++) { // 外层循环控制...

    c语言-冒泡排序

    C语言实践训练-冒泡排序swf动画 用冒泡法对10个学生的C语言成绩由高到低进行排序,并输出最高分和最低分。

    冒泡排序-排序过程 冒泡排序-排序过程

    ### 冒泡排序详解 #### 一、冒泡排序的基本概念与原理 冒泡排序是一种简单的排序算法,其基本思想是通过重复地遍历要排序的列表,比较相邻的两个元素,如果它们的顺序错误就把它们交换过来。遍历列表的工作是重复...

    冒泡排序-冒泡排序冒泡排序-冒泡排序

    冒泡排序 冒泡排序 冒泡排序 冒泡排序 冒泡排序

    12--[冒泡排序].zip源码scratch2.0 3.0编程项目源文件源码案例素材源代码

    12--[冒泡排序].zip源码scratch2.0 3.0编程项目源文件源码案例素材源代码12--[冒泡排序].zip源码scratch2.0 3.0编程项目源文件源码案例素材源代码12--[冒泡排序].zip源码scratch2.0 3.0编程项目源文件源码案例素材源...

    c++数据结构--冒泡排序

    1. **避免使用全局变量**:尽管在本例中使用全局变量 `lo` 来存储数组长度看起来很方便,但这种做法并不推荐。更好的做法是将数组长度作为参数传递给需要使用的函数。 2. **使用引用参数**:对于冒泡排序函数,我们...

Global site tag (gtag.js) - Google Analytics