点击页面空白处时隐藏弹出的div层

由于工作需要,最近玩了下js,需求是做一个弹出层(需求上只有个原型图,什么说明都没有我也是醉了),然后就开始想需要实现的效果,那么点击空白处需要隐藏肯定是不可少的。下边是这个div弹出层:

<div class="sku-batchlayer hint-layer hint-overlay hint-ext-position" id="group_operation">
<span style="white-space:pre">	</span>。。。、//具体代码
</div>
然后西边这个是页面需要点击的标签,点击之后就会弹出这个弹出层,css样式这里我就不引入了(因为不会。。。找大神帮我写的css)

<i class="sku-batch sku-batch-enable" onclick="cshop_product.show_group_operation(this)">

之后是需要写的逻辑,也就是js了,我们是使用的jquery:

show_group_operation : function(){
	event.stopPropagation();//阻止事件冒泡
	$('#group_operation').toggle();
},
//改变窗口大小时,弹出的批量设置隐藏
$(window).resize(function(){
	document.getElementById("group_operation").style.display="none";
});

//点击弹出的批量设置以外的地方时隐藏弹出层
$(document).click(function(event){
	$('#group_operation').css('display','none');
});

//点击弹出层时组织事件冒泡
$('#group_operation').click(function(){
	event.stopPropagation();
});
$(document).ready(function(){
	document.getElementById("group_operation").style.display="none";
});
说明一下,首先是页面加载时会调用ready方法,然后让弹出层先隐藏,之后点击<i>标签时会调用show_group_operation方法,里边的.toggle()会根据div的显示情况做出相反的作用。然后当点击页面的其他位置时会调用$(document).click(),使div隐藏。但是我们会发现当我们点击div内部的对象时也会使div隐藏,哲斌故事我们想要的。

那么醉关键的来了,怎么才能使点击div里边的元素时不让div隐藏呢,这关系到事件冒泡,关于事件冒泡情看我上一篇转载的文章

这里我们就需要使用event这个事件对象(上一篇有详细说明)。当点击到div的内部时,调用$('#group_operation').click()方法,之后event.stopPropagation()来阻止事件冒泡就可以了,当然在第二次点击<i>标签想要隐藏这个div时也是一样的道理。

刚工作不久,如果哪些地方说的不对,请各位高手指正




阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/liquantong/article/details/50066733
个人分类: jquery
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭