JQuery点击弹出层，单价空白区域隐藏弹出层（转帖）-CSDN博客

事件冒泡是指在jQuery元素集同一事件上绑定了多个方法，当我们触发其中某一方法时，

将执行一系列方法，称之为事件冒泡取消事件冒泡的方式是：event.stopPropagation();

首先列举一个简单的jQuery弹出层题目，在页面上定义一个弹出层和一个按钮，单击

按钮在按钮的下方显示一个弹出层，单击任何空白区域或者弹出层，弹出层消失，

该题目的解决方案为

 1 <script type="text/javascript">
 2       $(function(){
 3 
 4              //动画速度
 5  
 6              var speed = 500;
 7  
 8              //绑定事件处理 
 9 
10              $("#btnShow").click(function(event){
11 
12  
13 
14                     //取消事件冒泡
15 
16  
17                     event.stopPropagation();
18  
19 
20                     //设置弹出层位置
21  
22 
23                     var offset = $(event.target).offset();
24  
25 
26                     //设置弹出层位置
27  
28                     $("#divPop").css({top:offset.top+$(event.target).height()+"px",
29 
30  
31 
32                     left:offset.left});
33 
34  
35 
36                     //动画显示
37 
38  
39 
40                     $("#divPop").show(speed);         
41 
42  
43 
44              });
45 
46  
47 
48              //单击空白区域隐藏弹出层
49 
50  
51 
52              $(document).click(function(event){$("#divPop").hide(speed);});
53 
54  
55 
56       });
57 
58  
59 
60 </script>