点击页面其他地方隐藏div

隐藏一个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>
View Code

第二种方法：

 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>
View Code

 文件下载地址：https://files.cnblogs.com/files/cyppi/test.zip

最后，单身的盆友可以看看这个活动链接 http://www.cnblogs.com/cyppi/gallery/image/184448.html

posted @ 2017-04-17 15:43  amilly009  阅读(339)  评论(0)  编辑  收藏  举报