本日想聊一聊js的事宜冒泡！

在项目中遇到了一个很新鲜的题目：
父元素点击时，让它的子元素弹出一个捏造的挑选框；
在挑选框完成挑选后，封闭它；
 <div class="msg-list clearfix sex">
    <p class="name-tip">性别</p>  
    <div class="name">
      <p class="sex-val">男</p>
      <div class="sex-select"  id="sex">
        <p class="sex-active">男</p>
        <p>女</p>
      </div>
  </div> 
  （注：偏重关注它的层级关联，只是一个简朴完成性别切换的功用）

这时候一个诡异的征象发生了：

    不管怎样点击都不会让它完成隐蔽，是代码写错了。逻辑没见效？？？
    然则并没有，细细扒一扒，发如今谷歌下谁人displace：block；
    没有移除，在消逝的那一霎时，又涌现了，时候很短。
    
    倏忽想起来js中的点击事宜是会向上级通报的，（称事宜冒泡）
    那让我们再来理一下逻辑：
    父元素点击后，弹起子元素的挑选框，在子元素点击后，封闭挑选框，
    然后点击事宜向上通报，传给父元素，激活父元素的点击事宜，完了
    又弹起子元素的挑选框。

好了，既然缘由已晓得，那就停止事宜冒泡不就得了，网上许多要领：
笔者这里直接在子元素点击事宜函数的最后面加一句： return false；

    固然事宜冒泡实在也是有一些优点的：
    这个挑选框实在照样有一些题目，比方点击别的处所我想让他消逝，
    然则我又能预判到用户下一个会点击谁人元素呢，人家把你挑选框
    激活了，又不肯定会挑选，又可能会点击别的处所的对吧！所以只
    是挑选隐蔽，照样有肯定题目的。

那末事宜冒泡这时候就有用了，一切的点击事宜都邑通报到根元素，那末
我们只需要在根元素加一个点击事变去隐蔽它就ok了。

     $(document).click(function(){
         //隐蔽弹出div
     })