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>

转载于:https://www.cnblogs.com/baogg/articles/1868957.html