如果JS不加
wrapper.addEventListener('click', function(e){e.stopPropagation()})
点击点我按钮浮层不能显示,因为根据DOM冒泡模型,一旦点击了clickMe的button按钮,则它的父元素document也会执行。
用jQuery的
$(wrapper).on('click', false)
也能阻止默认冒泡,但会出现一个问题,浮层中的checkbox无法点击,因为也被阻止了。
但这样存在一个问题
$(document).on('click', function(){$(popover).hide()})
这个函数一直在监听,这样很耗内存。能否有方法监听一次就可以了?
用one函数
$(document).one('click', function(){$(popover).hide()})
就可以解决只监听一次的问题,但代码如下图这样写的话还是会存在DOM冒泡的问题,一旦点击clickMe,document的click也会执行。
把one函数放入setTimeout函数中可以解决这个问题,它会在DOM冒泡结束后在执行setTimeout内的函数,但不会执行setTimeout内的one函数,只有在下次点击时才会执行,因为第一次的冒泡已经结束了。