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

DBear

浏览: 231129 次
性别:
来自: 上海

最近访客更多访客>>

oracle1234

进击的小白

chw751039

Sdky

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端技术

IE ASP JavaScript CSS HTML

直入正题，看看下面的代码：

<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的方法就正常了。

分享到：

来点基础的——td设置固定宽度后，会自动拉 ... | 浏览器脚本兼容总结（持续更新）

2011-01-29 00:24
浏览 952
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论