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

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

IEASPJavaScriptCSSHTML 
阅读更多

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

 

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

 

分享到：
| 浏览器脚本兼容总结（持续更新）
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics