DOM事件（二）

image.png

当没有阻止事件传播时

image.png

点击按钮会没有反应，因为在冒泡过程中，浮窗先是成为block，然后又成了none，这两段代码都在执行，只不过，效果抵消了

在按钮处阻止事件传播，点击出现
在doucment对象或者documentElement身上绑定监听事件，可以点击让浮窗消失，body上绑定会直接出bug，因为body只有红线一行！

---

bug 1 点击图层也会消失，因此在wrapper上面阻止事件传播

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

---

$('.btn').on('click',function(){
  $('.popover').show()
})

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

$(document).on('click',function(){
  $('.popover').hide()
})

注意点：jquery中 a.on('xx',false)
这里的false 既阻止了默认事件，也阻止了事件传播
相当于stopPropagation和preventEvent

---

在document上面如果挂载多个监听器，将会造成内存负担，因此，选择不在一开始就监听document，而在浮层出现时监听一次，监听完销毁，再次点击再次监听

  $('.popover').show()
  $(document).one('click',function(){
    console.log(1)
  $('.popover').hide()
})
})

但是这样会出现问题，

image.png

点击并不会出现浮窗，但是代码都执行了，因为这是同步运行，show（）的同时添加了一个监听函数，监听到了点击事件然后又把他隐藏了，

所以用一个定时器来解决这个bug

$('.btn').on('click', function() {
  $('.popover').show()
  console.log('show') 
  setTimeout(function(){
    $(document).one('click', function() {
    console.log('hide')
    $('.popover').hide()
  })
  },0) 
})

因为settimeout是异步代码，会在同步代码执行完毕后再执行，这下就能点开了

---

浏览器会时不时的偷懒，因此会导致有些bug的产生，比如每秒钟打印两次时间，当浏览器不在当前页面时，他只会每秒做一次

jquery clone(true) 深拷贝