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>