需求
目前插件提供的是点击右上角的叉号关闭，但是产品想要优化成，点击空白区域也可关闭当前图片
问题
题主目前用的是js版本，不依托与jq
方案1
当时理所当然的想到了一种方案，有事找度娘。 找到了此篇链接：www.cnblogs.com/maoye520/p/… 虽然能用，但是这篇答主用的是jq，在我们项目中引用的地方改动地方有7处，工作量太大
方案2
鉴于第一种方案太麻烦，所以想出来了第二种解决方案，自己去写jq，监听空白区域的元素，点击后，直接隐藏当前当前元素就行
//由于是未来元素,需要用on去找元素
//点击外层隐藏图片
$('.box-body').on('click', '.viewer-fixed', function () {
console.log('点击触发初始化')
$(this).removeClass('viewer-in').addClass('viewer-hide')
})
//点击图片，阻止 点击外层隐藏图片事件
$('.box-body').on('click', '.viewer-canvas', function (e) {
//阻止事件冒泡
e.stopPropagation()
})
//点击工具栏，阻止 点击外层隐藏图片事件
$('.box-body').on('click', '.viewer-footer', function (e) {
//阻止事件冒泡
e.stopPropagation()
})
不过这样会有以下问题：
- 需要阻止工具栏的点击外层事件（已解决）
- 需要阻止图片的外层点击事件（已解决）
- 因为我们是通过隐藏方式，导致第二次打开时候，会出现第一次预览的图片，效果不是特别友好
方案3
然后就想着通过事件委派，用外层盒子去委派关闭按钮class的方法，但是实验证明，class没有绑定click事件，分析元素发现，它有一个 data-action="mix",跟踪源码后发现，这个就是点击事件的属性。
最终更改方案：
找到源码的class="viewer-container"，后面添加属性data-action="mix"
//这里增加一个属性即可
O.TEMPLATE = '<div class="viewer-container" data-action="mix">......</div>';
总结： 一步步来，总有最简单的实现方式
