区域外点击隐藏

最新推荐文章于 2025-08-23 08:00:22 发布

转载最新推荐文章于 2025-08-23 08:00:22 发布 · 77 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lljboke/p/8847649.html

文章标签：

#xhtml

本文介绍了一种通过JavaScript/jQuery实现的区域外点击隐藏效果。该效果主要用于网页上浮动菜单或其他需要根据用户点击位置来显示或隐藏的元素。通过阻止特定区域内的点击事件冒泡，并监听整个容器的点击事件，可以实现当点击指定区域之外时隐藏该区域的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 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>