点击别处关闭浮层

1. 新建按钮和浮层，以及小三角

   
   
   

   截图1
   
   

   HTLML代码

  
  



  点我
  
浮层

CSS代码

.wrapper{
  position: relative;
  display: inline-block;
}
.popover{
  border:1px solid red;
  position: absolute;
  left:100%;
  top:0px;
  white-space:nowrap;
  margin-left:10px;
  padding:10px;
  background: white;
  display: none;  /*默认浮层关闭*/
}
/*小三角*/
.popover::before{
  position: absolute;
  right:100%;
  top:5px;
  border:10px solid transparent;
  border-right-color:red;
  content:'';
}
.popover::after{
  position: absolute;
  right:100%;
  top:5px;
  border:10px solid transparent;
  border-right-color:white;
  content:'';
  margin-right:-1px;
}

2. JavaScript监听两个点击事件

clickMe.addEventListener('click',function(){
  popover.style.display='block'
})
document.addEventListener('click',function(){
  popover.style.display='none'
})

点击按钮后，冒泡太快，没有出现浮层就消失了。
添加阻止冒泡，停止传播

clickMe.addEventListener('click',function(e){
  popover.style.display='block'
  e.stopPropagation() //添加阻止冒泡，停止传播
})
document.addEventListener('click',function(){
  popover.style.display='none'
})

缺点是点击浮层，浮层也会消失，下面优化，把阻止冒泡放在wrapper上，而不是放在button上

clickMe.addEventListener('click',function(){
  popover.style.display='block'
})
wrapper.addEventListener('click',function(e){
  e.stopPropagation() //添加阻止冒泡，停止传播
})
document.addEventListener('click',function(){
  popover.style.display='none'
})

当监听器太多的时候，document.addEventListener太多了，太占内存。

3. jQuery的方法
   首先引入jQuery，并添加，该方法触发了一个bug，没有办法点击浮层处的checkbox这是因为在wrapper上添加了阻止默认事件导致的，

$(clickMe).on('click',function(){
  $(popover).show()
})
$(wrapper).on('click',false)
$(document).on('click',function(){
  $(popover).hide()
})

所以不能用false的语句，还是要用阻止传播。并只在show的时候监听一次one click，特别节省内存。

$(clickMe).on('click', function() {
  $(popover).show()
  $(document).one('click', function() {
    $(popover).hide()
  })
})
$(wrapper).on('click', function(e) {
  e.stopPropagation()
})

4. 设置闹钟的方法
   还有一种方法，不用阻止传播，而是设置一个闹钟，等一会执行（时间为0，不是立即执行，是等一会，等你再点击就执行）这样就删除了阻止传播这一步。

$(clickMe).on('click', function() {
 $(popover).show()
 setTimeout(function(), {
   $(document).on('click', function() {
     $(popover).hide()
   })
 },0)
})

推荐采用jQuery的省内存方法。

5. 做到点击按钮开启浮层，再次点击关闭浮层

clickMe.addEventListener('click', function(e){
  popover.style.display = 'block'
    $(clickMe).one('click', function() {
      $(popover).hide()
    })  
})

wrapper.addEventListener('click', function(e){
  e.stopPropagation()
})

document.addEventListener('click', function(){
  popover.style.display = 'none'
})