隐藏一个div通常来讲是比较简单的，而点击页面其他地方隐藏div就要注意一下事件冒泡了。事件冒泡指的是，点击子类的会连带的触发父类的的事件，从而造成不必要的联动。
cancelBubble:
stopPropagation和cancelBubble的区别：
第一种方法：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <meta name="renderer" content="webkit"> 7 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 8 <title>点击页面其他地方隐藏div</title> 9 </head> 10 <style type="text/css"> 11 *{ 12 margin: 0; 13 padding: 0; 14 } 15 img{ 16 border:0; 17 } 18 ol, ul ,li{list-style: none;} 19 #btn01,#btn02{ 20 width: 100px; 21 height: 30px; 22 line-height: 30px; 23 text-align: center; 24 border-radius: 5px; 25 background: #ff894c; 26 color: #fff; 27 display: block; 28 text-decoration: none; 29 margin: 30px 0 0 30px; 30 } 31 #show{ 32 width: 100px; 33 height: 100px; 34 background: #66cc00; 35 margin: 0 auto; 36 } 37 38 </style> 39 <body> 40 41 <a id="btn01" href="javascript:;">按钮1</a> 42 <a id="btn02" href="javascript:;">按钮2</a> 43 <div id="show"></div> 44 <script type="text/javascript" src="jquery-1.8.2.min.js"></script> 45 <script type="text/javascript"> 46 function stopPropagation(e) { 47 if (e.stopPropagation){ 48 e.stopPropagation(); 49 }else{ 50 e.cancelBubble = true; 51 } 52 53 } 54 55 $(document).bind('click',function(){ 56 $('#show').css('display','none'); 57 }); 58 59 $('#show').bind('click',function(e){ 60 stopPropagation(e); 61 }); 62 </script> 63 64 </body> 65 </html>
第二种方法：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <meta name="renderer" content="webkit"> 7 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 8 <title>点击其他地方隐藏div</title> 9 </head> 10 <style type="text/css"> 11 *{ 12 margin: 0; 13 padding: 0; 14 } 15 img{ 16 border:0; 17 } 18 ol, ul ,li{list-style: none;} 19 #btn01,#btn02{ 20 width: 100px; 21 height: 30px; 22 line-height: 30px; 23 text-align: center; 24 border-radius: 5px; 25 background: #ff894c; 26 color: #fff; 27 display: block; 28 text-decoration: none; 29 margin: 30px 0 0 30px; 30 } 31 #show{ 32 width: 100px; 33 height: 100px; 34 background: #66cc00; 35 margin: 0 auto; 36 } 37 38 </style> 39 <body> 40 41 <a id="btn01" href="javascript:;">按钮1</a> 42 <a id="btn02" href="javascript:;">按钮2</a> 43 <div id="show"></div> 44 <script type="text/javascript" src="jquery-1.8.2.min.js"></script> 45 <script type="text/javascript"> 46 $(document).bind('click',function(e){ 47 var e = e || window.event; //浏览器兼容性 48 var elem = e.target || e.srcElement; 49 while (elem) { //循环判断至跟节点，防止点击的是div子元素 50 if (elem.id && elem.id=='show') { 51 return; 52 } 53 elem = elem.parentNode; 54 } 55 56 $('#show').css('display','none'); //点击的不是div或其子元素 57 }); 58 </script> 59 </body> 60 </html>
文件下载地址：http://files.cnblogs.com/files/cyppi/test.zip
最后，单身的盆友可以看看这个活动链接 http://www.cnblogs.com/cyppi/gallery/image/184448.html