一、冒泡原理
事件冒泡: 當一個元素上的事件被觸發的時候，比如說滑鼠點選了一個按鈕，同樣的事件将會在那個元素的所有祖先元素中被觸發。這一過程被稱為事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。
順序
E 6.0:
div -> body -> html -> document
其他浏覽器:
div -> body -> html -> document -> window
不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload
二、 阻止冒泡的方法
标準浏覽器 和 ie浏覽器
w3c的方法是event.stopPropagation()
IE則是使用event.cancelBubble = true
相容的寫法：
if(event && event.stopPropagation)
{
event.stopPropagation(); // w3c 标準
}
else
{
event.cancelBubble = true; // ie 678 ie浏覽器
}
三、判斷目前對象
火狐 谷歌 等 event.target.id
ie 678 event.srcElement.id
相容性寫法：
var targetId = event.target ? event.target.id : event.srcElement.id;
targetId != "show"
四、案例：點選空白處隐藏盒子
這個案例就是說，一個盒子，點選除了自己之外的任何一個地方，就會隐藏。
原理：
點選自己不算
點選空白處 就是點選 document
案例代碼如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>點選空白處隐藏盒子</title>
6 <style>
7 body{
8 height: 2000px;
9 }
10 #mask{
11 width: 100%;
12 height: 100%;
13 opacity:0.4;/*半透明 标準浏覽器*/
14 filter: alpha(opacity=40);/*IE6半透明*/
15 background-color: black;
16 position: fixed;
17 top:0;
18 left:0;
19 display: none;
20 }
21 #show{
22 width: 300px;
23 height: 300px;
24 background-color: #fff;
25 position: fixed;
26 top: 50%;
27 left: 50%;
28 margin-top: -150px;
29 margin-left: -150px;
30 display: none;
31 }
32 </style>
33 </head>
34 <body>
35 <a href="javascript:;" id="login">注冊</a>
36 <a href="javascript:;">登入</a>
37 <div id="mask"></div>
38 <div id="show"></div>
39 </body>
40 </html>
41 <script>
42 function $(id){return document.getElementById(id);}
43 var login=document.getElementById("login");
44 login.onclick=function(event){
45 $("mask").style.display="block";
46 $("show").style.display="block";
47 document.body.style.overflow="hidden";//不顯示滾動條
48 //取消冒泡
49 var event=event||window.event;
50 if(event&&event.stopPropagation){
51 event.stopPropagation();
52 }else{
53 event.cancelBubble=true;
54 }
55
56 }
57 document.onclick=function(event){
58 var event=event||window.event;
59 //alert(event.target.id);//傳回的是點選的某個對象的id 标準
60 //alert(event.srcElement.id);//IE6 7 8
61 var targetId=event.target ? event.target.id : event.srcElement.id;//相容性寫法
62 if(targetId!="show"){//不等于目前點選的名字
63 $("mask").style.display="none";
64 $("show").style.display="none";
65 document.body.style.overflow="visible";//顯示滾動條
66 }
67 }
68 </script> ![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)