1 <!-- 什么是事件冒泡：在一个对象触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么次事件就会调用这个处理程序，如果没有定义次事件的处理程序或者事件返回true，那么这个事件就会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window） 2 3 冒泡事件的作用：事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父元素上，避免把事件处理器添加到多个子元素上），它还可以让你在对象层的不同级别捕获事件。 4 5 阻止事件冒泡：事件冒泡的机制有时候是不需要的，需要阻止掉，通过event.StopPropagation()来阻止 --> 6 7 8 <!DOCTYPE html> 9 <html lang="en"> 10 <head> 11 <meta charset="UTF-8"> 12 <title>Document</title> 13 <script type="text/javascript" src="../jquery-1.12.4.min.js"></script> 14 <script type="text/javascript"> 15 $(function(){ 16 $('.son').click(function(event){ 17 // event参数表示代表事件本身的对象，通过第一个参数传递； 18 alert('1'); 19 20 // event.stopPropagatio阻止事件冒泡； 21 event.stopPropagation(); 22 // 阻止默认行为（如表单提交） 23 envnt.preventDefault(); 24 25 return false; 26 // 上面两个可以合并成这个，既可以阻止事件冒泡，又可以阻止默认行为 27 }) 28 29 $('.father').click(function(){ 30 alert('2'); 31 }) 32 33 $('.grandfather').click(function(){ 34 alert('3'); 35 }) 36 37 38 // document 是最顶级的标签，比body还大 39 $(document).click(function(){ 40 alert('4'); 41 }); 42 }); 43 </script> 44 <style type="text/css"> 45 .grandfather{ 46 width: 300px; 47 height: 300px; 48 background-color: green; 49 } 50 .father{ 51 width: 200px; 52 height: 200px; 53 background-color: gold; 54 } 55 .son{ 56 width: 100px; 57 height: 100px; 58 background-color: red; 59 } 60 </style> 61 </head> 62 <body> 63 <div class="grandfather"> 64 <div class="father"> 65 <div class="son"></div> 66 </div> 67 </div> 68 </body> 69 </html>