由于工作需要,最近玩了下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" οnclick="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时也是一样的道理。
刚工作不久,如果哪些地方说的不对,请各位高手指正