1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2.  
         
  2. <html> 
    3.  
         
  3. <head> 
    4.  
         
  4.     <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> 
    5.  
         
  5.     <title></title> 
    6.  
         
  6.     <style type="text/css"> 
    7.  
         
  7.         #wrap{ 
    8.  
         
  8.             width:500px; 
    9.  
         
  9.             height:400px; 
    10.  
         
  10.             pink; < /span>
    11.  
         
  11.         } 
    12.  
         
  12.         #center{ 
    13.  
         
  13.             width:300px; 
    14.  
         
  14.             height:300px; 
    15.  
         
  15.             red; < /span>
    16.  
         
  16.         } 
    17.  
         
  17.         #inner{ 
    18.  
         
  18.             width:100px; 
    19.  
         
  19.             height:100px; 
    20.  
         
  20.             background:#fff; 
    21.  
         
  21.         } 
    22.  
         
  22.     </style> 
    23.  
         
  23.     <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
    24.  
         
  24.     <script type="text/javascript"> 
    25.  
         
  25.         $(function(){ 
    26.  
         
  26.             $("#wrap").click(function(){ 
    27.  
         
  27.                 alert("我是最外层"); 
    28.  
         
  28.             }); 
    29.  
         
  29.             $("#center").click(function(aaa){//传一个参数，这个参数不仅可以是event，也可以是其他的，参数可以自定义 
    30.  
         
  30.                 alert("我是中间层"); 
    31.  
         
  31.                 aaa.stopPropagation();//给这个参数一个stopPropagation()方法，这样就可以阻止冒泡了 
    32.  
         
  32.             }); 
    33.  
         
  33.             $("#inner").click(function(){ 
    34.  
         
  34.                 alert("我是最里层"); 
    35.  
         
  35.                 return false;//直接用return false代替aaa.stopPropagation()也可以阻止冒泡 
    36.  
         
  36.             }) 
    37.  
         
  37.         }) 
    38.  
         
  38.     </script> 
    39.  
         
  39. </head> 
    40.  
         
  40. <body> 
    41.  
         
  41.     <div id="wrap">我是最外层 
    42.  
         
  42.         <div id="center">我是中间层 
    43.  
         
  43.             <div id="inner">我是最里层</div> 
    44.  
         
  44.         </div> 
    45.  
         
  45.     </div> 
    46.  
         
  46. </body> 
    47.  
         
  47. </html> 
    48.  
        
 
    
 
     
       冒泡：当一个元素里面包着其他元素，里面和外面的元素都给点击事件，点击里面的元素时同 
     
 
     
       时会触发外面的元素，造成意外的效果。冒泡就是因为事件会按照DOM的层次结构像水泡一样不断向上 
     
 
     
       直至顶端。 
     
 
    
 
    
        
    
 
    
 
     
       解决停止冒泡的方法一：1.给每一个元素一个事件对象，event 
     
 
     
                             2.用stopPropagation()方法停止冒泡。 
     
 
     
       解决停止冒泡方法二：return false