点击其他区域菜单消失

Posted 2020-08-11 蜗牛闯红灯

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击其他区域菜单消失相关的知识，希望对你有一定的参考价值。

 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

以上是关于点击其他区域菜单消失的主要内容，如果未能解决你的问题，请参考以下文章

vue 点击弹出下拉菜单点击其他页面收回菜单

WPF 托盘图标右键弹出的ContextMenu如何关闭