点击别处关闭图层

1、一个总的div，里面包括一个button按钮和一个浮层div
2、知识点：允许你为表单中（或不在表单中）的提交项选择一个单一值。

HTML代码1-1

1、让浮层相当于点击按键进行绝对定位，同时给到点击按钮相对定位
2、white-space:nowrap(文本不会换行，在同一行继续直到遇到
标签)
3、::before建立一个红色的三角形，::afterj建立一个白色的三角形

CSS代码1-1

1、监听clickMe事件，触发浮层出现。但当我们点击页面中为啥没有打印出1，这是因为我们误以为body就是整个页面，给body一个边框就可以看到body范围，这是我们可以直接监听document，这就是我们要监听的范围。

JS代码1-1

给body增加一个边框

body的范围

直接监听画面document

1、当鼠标点击“点我”，浮层没有再出现了，这是因为当我点击“点我”时，同时把document的点击事件执行了（先从捕获阶段开始问，button被点了，问body要做什么吗，body说因为没有函数要执行的直接到冒泡阶段，问button要执行什么吗，button说没有啥执行的，问body（你的button被点击了）要做什么吗，body说要我这里有个函数要执行，马上就执行这个函数）

5.png

6.png

点击button时，同时打印出block和none

1、添加了e.stopPropagation()，当点击button时，就阻止通知body执行点击事件，这时浮层就可以出现了，再点击页面任意地方就可以隐藏浮层

8.png

1、让阻止函数放在div上，新增一个checkbox的复选框，为了能让我们点击选中复选框，当点击浮层自身不会消失，才能选中复选框，实现了点击浮层自身不会消失，只有点击页面才能消失。

10.png

1、$(popover).show()实现了点击button事件，浮层就出现。
2、当我们有多个点击事件，就有很多事件在监听document，这就很浪费内存。l节省内存方案，这时我们利用JQurey来做。

e.stopPropagation()是阻止传播

1、用e.stopPropagation()阻止传播，可以实现本节内容，false就不行因为false是直接阻止事件发生，两者区别不一样。

false是阻止事件发生

1、$(popover).hide()实现浮层的隐藏功能

浮层隐藏

1、将document中的on改成one，就可以实现每触发一次点击事件，只实现一次document监听。

14.png

打印document只打印一次

1、当我们把上述阻止事件取消，同样实现不了本节的功能，只要有函数在她的处理队列就会执行这个函数，不管什么时候加的。

16.png

方案二

除了上面阻止方法，可以利用闹钟进行控制。点击button，先触发show()，再到页面中的$(document).on()...d,最后才到闹钟事件。

17.png

18.png