区域外点击隐藏

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3  <head>
 4   <title>区域外点击隐藏</title>
 5   <meta name="generator" content="editplus" />
 6   <meta name="author" content="" />
 7   <meta name="keywords" content="" />
 8   <meta name="description" content="" />
 9  </head>
10  <style>
11     *{
12         padding:0px;
13         margin:0px;
14     }
15     .container{
16         position:absolute;
17         backgound-color:#e5e5e5;
18         width:100%;
19         height:100%;
20     }
21     .rightNav{
22         position:absolute;
23         right:0px;
24         width:200px;
25         height:100%;
26         background-color:#FFFFFF;
27         border:1px solid #e1e1e1;
28         box-shadow:-1px -1px 4px 0 rgba(153,153,153,0.50),1px 1px 4px 0 rgba(153,153,153,0.50);
29         border-radius:4px;
30     }
31  </style>
32  <body>
33     <div class="container">
34         <div class="rightNav">text</div>
35     </div>    
36     
37  </body>
38 </html>
39 <script src="./jquery-1.12.4.min.js"></script>
40 <script>
41     $(".container").click(function(e){
42     console.log(e.target);
43         //1.获取点击事件发生的对象
44         var target=$(e.target);
45         //2.判断是否发生在特定区域外
46         if(!target.is(".rightNav")){
47             //3.判断区域是否已经隐藏
48             if($(".rightNav").is(":visible")){
49                 //4.未隐藏则隐藏
50                 $(".rightNav").hide();
51             }
52         }
53     });
54     
55     //1.阻止右边栏点击事件冒泡
56     $(".rightNav").click(function(e){
57         console.log(e.stopPropagation());
58         alert(event.cancelBubble);
59         e?e.stopPropagation():event.cancelBubble=true;
60         
61     })
62     //2.外部点击区点击会让右边隐藏
63     $(".container").click(function(){
64         $(".rightNav").hide();
65     });
66 </script>