阻止冒泡方法

JS事件流其中一种是冒泡事件，当一个元素被触发一个事件时，该目标元素的事件会优先被执行，然后向外传播到每个祖先元素，恰如水里的一个泡泡似的，从产生就一直往上浮，到在水平面时，它才消失。在这个过程中，如果你只希望事件发生在目标元素，而不想它传播到祖先元素上去，那么你需要在“泡泡”离开对象之前刺破它。 

　　我在文档中写了一个层，<div id="need_hide">点击以外隐藏该层</div>，并为之设置了简单的样式，现在我希望点击该层以外的地方使之隐藏，那么我给根元素绑定了一个click事件，一点击html就隐藏该DIV，代码如下： 

Javascript代码  

1. document.documentElement.onclick = function() {  
2.     document.getElementById('need_hide').style.display = 'none';  
3. }  

　　但是点击该层后，也使之隐藏了，这不是我希望得到的效果。由于该层属于根元素的子节点，所以它也被绑定了这个click事件，那么需在该元素被click时阻止冒泡事件的发生，加上以下代码： 

Javascript代码  

1. function stopPropagation(e) {  
2.     e = e || window.event;  
3.     if(e.stopPropagation) { //W3C阻止冒泡方法  
4.         e.stopPropagation();  
5.     } else {  
6.         e.cancelBubble = true; //IE阻止冒泡方法  
7.     }  
8. }  
9. document.getElementById('need_hide').onclick = function(e) {  
10.     stopPropagation(e);  
11. }  

　　如果还想增加一个链接：<a href="#" id="btn_show">显示层</a>，用它来控制该层显示出来，那么仍然需要在该链接被点击时阻止冒泡事件的发生，加上以下代码： 

Javascript代码  

1. document.getElementById('btn_show').onclick = function(e) {  
2.     document.getElementById('need_hide').style.display = 'block';  
3.     stopPropagation(e);  
4. }