一、冒泡原理
事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到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>
