JQuery点击弹出层，单价空白区域隐藏弹出层（转帖）
事件冒泡是指在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>
