1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gb2312" /> 5 <title></title> 6 <style> 7 span { 8 color:red; 9 } 10 #test { 11 display:none; 12 position:absolute; 13 left:30px; top:30px; 14 width:200px; 15 border:1px solid red; 16 background:#fff; 17 } 18 </style> 19 </head> 20 <body> 21 <span id="span">打开层</span> 22 <div>1-1111111111</div> 23 <div>1-1111111111</div> 24 <div>1-1111111111</div> 25 <div>1-1111111111</div> 26 <div>1-1111111111</div> 27 <div id="test"> 28 <a href="#">123</a> 29 浮层，点击这个浮层以外的区域，都可以隐藏这个浮层 30 <div> 31 <script> 32 function $(o){return document.getElementById(o)} 33 $('span').onclick = function(e){ 34 $('test').style.display = 'block'; 35 e = e || window.event; 36 if (e.stopPropagation) { 37 e.stopPropagation(); 38 } else { 39 e.cancelBubble = true; 40 } 41 42 } 43 var odiv = $('test'); 44 document.onclick = function(e){ 45 e = e || window.event; 46 var s = e.target || e.srcElement; 47 if( e.srcElement ){ //ie 48 if( !(s == odiv || odiv.contains(s)) ){ 49 odiv.style.display = 'none'; 50 } 51 }else{ 52 var res = odiv.compareDocumentPosition(s); 53 if( !(s == odiv || res == 20 || res == 0) ){ 54 odiv.style.display = 'none'; 55 } 56 } 57 58 } 59 60 61 </script> 62 </body> 63 </html>
参考资料：