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) 深拷贝

你可能感兴趣的:(DOM事件(二))