点击页面空白处时隐藏弹出的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" ο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时也是一样的道理。

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