Js判断事件发生在某个指定Div内还是外

真实需求：关于点击空白关闭弹窗的js写法推荐？

在很多网站，经常看到：点击某个按钮或链接，出现一个弹窗或者展开一个模块，然后点击弹窗（模块）之外的空白，它会被关闭。看过bootstrap和一些其他的源码，有的是使用类似jQuery的.not()写的，但总感觉这样写不太好，应该怎么写是比较严谨的呢？

我见过两种方案：

1. 监听document.body上的点击事件，如果来源不在目标范围内则关闭；
2. 在弹窗下、所有页面内容上放一个层（至于透明不透明自己看着办），点那个层的时候关闭。

其实，一般处理方式就是判断点击事件的 e.target 是否为非弹层区域。不是的话，就关闭弹层。

注意: 将监听事件绑定在document上。绑定在body上，页面body高度没有超过一屏时，点击非body区域，是不起作用的。

下面是实现代码：

/** 
 * Mark 1 的原理：
 *  判断点击事件发生在区域外的条件是：
 *  1. 点击事件的对象不是目标区域本身
 *  2. 事件对象同时也不是目标区域的子元素
 */
// jquery版
$(document).mouseup(function(e) {
  var _con = $(' 目标区域 ');   // 设置目标区域
  if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
    some code...   // 功能代码
  }
});

// 纯js
document.onmouseup = function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;
    var _tar = document.getElementById('')    //获取你的目标元素
    //1. 点击事件的对象不是目标区域本身
    //2. 事件对象同时也不是目标区域的子元素
    if( !(target == _tar) && ! _tar.contains(target) ) {    // 目标元素外
        //some code...
    } else {        // 目标元素内
        //some code...
    }
}