弹出层区域外点击退出的实现

经常用到jQuery一个弹出层组件，thickbox。用它之前也自己写过一个插件，但是遮罩层效果有bug，兼容性不是很好，对于弹出层区域外点击也能关闭层的实现，起初想法也是捕获弹出层外区域的单击事件来启动层的关闭动作。

 

实际中，一般弹出层会有个遮罩层，那么其实对遮罩层绑定单击事件就行了，看thickbox也是如此实现的。那么如果没有遮罩层呢？难道绑定N个其他div亦或是body?

 

今天冒出一个想法，并试验了下，应该是可行的。

 

当弹出一个层时，同时触发层的focus事件，使其获得一个焦点，那么用户在层外点击，则可以触发一个blur事件，在blur事件的回调函数中写层退出动作就可以了。这样的话，可以在没有遮罩层的情况下更方便一些。