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

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

?

?
?
?? ?上面代码的特点是内外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的方法就正常了。
?