显示隐藏类的弹出面板，一般都有一个需求，在面板本身上点击的时候，面板不隐藏，在除面板之外的其它区域点击，要隐藏这个面板。

以前常常用点击面板的时候阻止这个事件的冒泡，然后再在document上委托这个关闭面板的点击事件。

比如这样的结构：

<div class="wrapper">
    ....
    <div class="bigPicWrapper">
    ...
    </div>
</div>

点击wrapper内部，bigPicWrapper都不会隐藏，只有点击wrapper外部才会隐藏。

利用阻止事件冒泡一般是这样写的：

const oWrapper = document.querySelector('.wrapper');
oWrapper.onclick = function (e) {
  console.log(e.target);
  e.stopPropagation();
}
document.onclick = function (e) {
  oBigImgBox.classList.add('none');
}

这就需要写两个点击事件，其实有时候oWrapper上面不一定有点击事件。

所以可以换一个思路，只有点击oWrapper里面的后代元素和oWrapper元素本身，不会隐藏oBigImgBox，点击其它元素都会隐藏。

有一个contains()方法就派上用场了。

具体介绍点击看文档。

把上面的代码改写成这样：

   const oWrapper = document.querySelector('.wrapper');
   document.addEventListener('click', function (e) {
   // 点击除了放大镜容器内部所有子元素，包括父元素本身，都会隐藏大图
   console.log(oWrapper.contains(e.target), e.target)
   if (!oWrapper.contains(e.target)) {
       oBigImgBox.classList.add('none');
   }
})

这样就可以少写一个事件了。

比如放大镜这个案例，点击空白处隐藏大图就使用的第二个方法。