点击其他区域菜单消失

最新推荐文章于 2019-09-29 14:06:27 发布

weixin_34319817

最新推荐文章于 2019-09-29 14:06:27 发布

阅读量187

点赞数

原文链接：http://www.cnblogs.com/hjt-7/p/5912667.html

版权

 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>

参考资料：

http://www.jb51.net/article/82847.htm

转载于:https://www.cnblogs.com/hjt-7/p/5912667.html

weixin_34319817

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击其他区域菜单消失

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gb2312" /> 5 <title></title> 6 <style> 7 span {...
复制链接

扫一扫