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

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

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

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

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

该题目的解决方案为

<script type="text/javascript">
      $(function(){

             //动画速度
 
             var speed = 500;
 
             //绑定事件处理 

             $("#btnShow").click(function(event){

 

                    //取消事件冒泡

 
                    event.stopPropagation();
 

                    //设置弹出层位置
 

                    var offset = $(event.target).offset();
 

                    //设置弹出层位置
 
                    $("#divPop").css({top:offset.top+$(event.target).height()+"px",

 

                    left:offset.left});

 

                    //动画显示

 

                    $("#divPop").show(speed);         

 

             });

 

             //单击空白区域隐藏弹出层

 

             $(document).click(function(event){$("#divPop").hide(speed);});

 

      });

 

</script>