点击div层之外的其他地方关闭弹出层

首先说一下关于closet()的知识，主要来自W3C
closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

  语法      .closest(selector)

参数	描述
selector	字符串值，包含匹配元素的选择器表达式。

如果给定表示 DOM 元素集合的 jQuery 对象，.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素，并用匹配元素构造新的 jQuery 对象。

定义和用法
closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

语法.closest(selector)

参数	描述
selector	字符串值，包含匹配元素的选择器表达式。

详细说明
如果给定表示 DOM 元素集合的 jQuery 对象，.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素，并用匹配元素构造新的 jQuery 对象。.parents() 和 .closest() 方法类似，它们都沿 DOM 树向上遍历。两者之间的差异尽管微妙，却很重要：

.closest()	.parents()
沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止。	沿 DOM 树向上遍历，直到文档的根元素为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选。
返回包含零个或一个元素的 jQuery 对象	返回包含零个、一个或多个元素的 jQuery 对象

例子：

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
  <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
      <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

通过下面两个查询条件的对比，可以明显看出：

var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');

以上代码会改变 level-2 ul的颜色，因为它既是列表项 A 的第一个 ul祖先，同时也是列表项 II 的后代。它不会改变 level-1 ul的颜色，因为它不是 list item II 的后代。

   $('li.item-a').closest('ul', listItemII).length //1
   $('li.item-a').closest(''#one', listItemII).length //0

所以点击div层之外的其他地方可以使用此方法，通过length来确定；
例如在点击事件中可以通过e.target来确定点击是哪个元素，当在document中点击的时候，

$(document).click(function(e){
if(!$(e.target).closest(selector).length){ }
})

当length为0的时候，此时执行关闭

补充：后来再写该功能的时候出现点问题，当我在页面点击按钮的时候，出现该弹窗，会与document的事件冲突，此时是由于冒泡事件影响的，因此在点击出现的按钮要阻止冒泡事件的产生,只能是阻止冒泡事件，而不能用preventDefault阻止所有事件

$("#btn").on('click',function(e){
$("#box").show();
e.stopPropagation();
})