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>
