Jquery冒泡

<style type="text/css">
*{margin:0px;padding:0px;}
.main{cursor:pointer;}
.list{border:1px solid black;display:none;}
.list li{cursor:pointer;border:1px solid red;list-style:none;}
#noPopEvent{width:100px; height:100px;  background-color:blue;font-size:12px;margin:200px;text-align:center;line-height:100px;}
</style>

<div style="width:200px;margin:20px;">
  <div class="main">点击我</div>
  <div class="list">
    <ul>
      <li>div+css教程</li>
      <li>javascript教程</li>
    </ul>
  </div>
</div>
<div id="noPopEvent">点击我不可以关闭哦</div>


<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $(".main").click(function(e){ 
    $(".list").toggle(); 
    e.stopPropagation();
  })  
  $(document).click(function(){ 
    $(".list").hide(); 
  })   
  $(".list li").click(function(){ 
    $(".main").text($(this).text()); 
    $(".list").hide(); 
  }) 
  $("#noPopEvent").click(function(e){ 
    e.stopPropagation(); 
  }) 
}); 
</script>