如何选取某个元素以外的区域实现隐藏

前言：我们在布局做功能的时候常常会遇到这样的情况，比如说点击除了这一元素（如万能的div）以外的区域实现隐藏，类似于bootstrap的点击蒙层消失的效果。我之前做的笨的方法是家伪类撑满剩下的区域，但是很明显是不行的，而且效果不好，今天总结了一下实现的方法，，希望对大家有所帮助

做这个是基于jQuery的一个方法

布局

<div id="test" style="width: 300px; height: 300px; background-color: #CBC7BC;">
    <p>div测试内容，点击其它地方会隐藏此div模块。</p>
</div>
<button>点击</button>

　　很简单的一个小小的div+button，效果如下：

我现在想要的效果是点击除div以外的区域进行div的隐藏，点击按钮对div进行心事和隐藏的切换，话不多说，直接上代码：

  $(document).bind('click', function(e) {
            e.stopPropagation();
            var e = e || window.event; //浏览器兼容性
            var elem = e.target || e.srcElement;
            while (elem) { //循环判断至跟节点，防止点击的是div子元素
                if (elem.id && elem.id == 'test') {
                    return;
                }
                elem = elem.parentNode;
            }
            $('#test').slideUp(); //点击的不是div或其子元素
        });
        $("button").on("click",function (e) {
            e.stopPropagation();
            $('#test').slideToggle()
        })

　　嗯，现在就是我们想要的效果了，快去试试你的div吧。