1、一个总的div，里面包括一个button按钮和一个浮层div
2、知识点：<input type='checkbox'>允许你为表单中（或不在表单中）的提交项选择一个单一值。
HTML代码1-1
1、让浮层相当于点击按键进行绝对定位，同时给到点击按钮相对定位
2、white-space:nowrap(文本不会换行，在同一行继续直到遇到
<br>标签)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
网友评论