阻止冒泡与内存

阻止冒泡我们可以使用

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

jQuery官方文档中有关于on的详细介绍，其中有一段：

调用event.stopPropagation() 和 event.preventDefault()会从一个事件处理程序会自动返回false。也可以直接将 false 当作 handler 的参数，作为 function(){ return false; } 的简写形式。因此，下面的写法 $("a.disabled").on("click", false); 将会阻止所有含有 "disabled" 样式的链接的默认行为，并阻止该事件上的冒泡行为。

所以上面的代码也可以用如下代码代替

$(xxx).on('click',false)

注意false同时包含了两项event.stopPropagation() 和 event.preventDefault()，如果只是需要e.stopPropagation()，那么请使用第一种方法，单独写。 否则event.preventDefault()会阻止浏览器默认行为，可能出现一些麻烦的问题。

$(btn).on('click',function(){
  $(layer).show()
})
$(wrap).on('click',function(e){
  e.stopPropagation()
})
$(document).on('click',function(){//即使不点击按钮，点击ducument也会执行此代码块，浪费内存
  $(layer).hide()
  $(layer1).hide()
  console.log(1)
})

上面的代码，即使不点击按钮，点击ducument也会执行代码块中的内容，浪费内存。解决方法如下：

 $(btn).on('click',function(){
   $(layer).show()
   $(document).one('click',function(e){//节省内存法
     console.log(1)
     $(layer).hide()
   })
 })
 $(wrap).on('click',function(e){
   e.stopPropagation()//阻止冒泡
 })

如果不添加阻止冒泡，则$(document).one(...)会在点击btn的时候执行。
当点击btn时，做2件事情，第1添加show监听，第2添加document的监听，那么问题来了，document的监听是在什么时候添加上去的呢？代码中并未有异步(setTimeout)的体现，所以在点击btn的时候，两个监听就都已经添加到处理队列里，所以如果不阻止冒泡，那么监听都会被执行。