如何实现点击页面空白处使弹框消失？

最近做项目，需要实现一个效果，就是“下拉框”或者弹框展开/显示之后，并不选择其中一个下拉选项，点击页面空白处，就使下拉框或者弹框收起/隐藏。
如果是select标签的话，就很简单了，select失去焦点的时候，select自己会收起。但是实际项目中，select并不能满足全部的需要，有时我们需要用ul、li来模拟下拉框。还有些弹框，点击空白处使弹框消失，可以简化用户操作，进而提高用户体验。如果不用插件的话，怎么实现这种效果呢？

如上图，本文实现的效果是，点击箭头1的设置图标，箭头2的弹框toggle，在箭头2的弹框显示时候，点击页面的其他部分，箭头2的弹框也会隐藏。
HTML布局和css样式就不再贴代码了，重点看一下给箭头1绑定的js事件：

$('.setIcon').on('click',function (event) {
    event.stopPropagation();//阻止事件冒泡
    $(this).siblings('.settingDiv').toggle();
    //点击空白处，下拉框隐藏-------开始
    var tag = $(this).siblings('.settingDiv');
    var flag = true;
    $(document).bind("click",function(e){//点击空白处，设置的弹框消失
        var target = $(e.target);
        if(target.closest(tag).length == 0 && flag == true){
            $(tag).hide();
            flag = false;
        }
    });
    //点击空白处，下拉框隐藏-------结束
});

代码说明（附下图）：
1、$('.setIcon')指的是设置的图标，$(‘.settingDiv’)指的是设置的弹框，即上图箭头2所指的弹框。
2、由于给$(document)绑定了click事件，所以如果其他地方有需要给$(document)绑定事件的话需要注意一下，以免发生冲突。
3、阻止事件冒泡的‘event.stopPropagation();’这句话一定要写，不然可能会没有效果，但是也不报错。

希望本文能对你有所帮助！

个人微信公众号：小禾子的魔法盒子，欢迎关注！