事件冒泡 == 得與失

今天想聊一聊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
     })