DOM事件实例

点击别处关闭浮层

Ⅰ. 思路1

阻止冒泡 stopPropagation()

• 案例点这里

• bug：同样地，点击浮层会关闭

• 解决bug：在它们的父元素wrapper上增加阻止冒泡

Ⅱ. 思路2

document在捕获阶段触发click事件，点击按钮在冒泡阶段触发click事件

• 案例点这里

• bug：点击浮层会关闭

• 解决bug：笨方法，给浮层也加上一个click事件，这里用思路1的解决方法是解决不了问题的。因为document的click事件是在捕获阶段获取的，而stopPropagation()只是阻止了冒泡阶段。

Ⅲ. 思路3（更节省内存）

1.使用one()方法，使document只执行一次click事件（hide）

• 案例点这里
• 解决两个bug方法
  • 阻止冒泡
    1. 知识点
       a. jQuery的.on()方法的一个用法
       $(wrapper).on('click',false)
       //等价于下面
       $(wrapper).on('click',function(e){
       e.stopPropagation()
       e.preventDefault()
       })
       //会出现的一个bug
       //preventDefault()会使得checkbox不能点击。
       b. .one()方法只执行一次事件的函数。
  • 添加一个定时器，让document的事件函数在冒泡结束之后再添加。----------防止点击button时，浮层无法出现。