js中冒泡事件

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" >  
  3. <head>  
  4.     <title>JS中的事件冒泡</title>  
  5.     <mce:script type="text/javascript"><!--  
  6.     function ClickTr()  
  7.     {  
  8.       alert("TR");  
  9.     }  
  10.     function ClickTd()  
  11.     {  
  12.       alert("TD");  
  13.       //如果不加下面的代码点击先会弹出TD然后弹出TR，原因是HTML是对象结构当点击AAA的时候（执行）,会冒泡到TR-->table-->body->document->window,当用event.cancelBubble=true的时候就说明阻止该冒泡行为   
  14.       event.cancelBubble=true;  
  15.     }  
  16.       
  17. // --></mce:script>  
  18. </head>  
  19. <body>  
  20. <div style="background-color:Azure;" mce_style="background-color:Azure;">目的当点击BBB的时候弹出TR,当点击AAA的时候弹出TD</div>  
  21. <table>  
  22. <tr onclick="ClickTr();">  
  23. <td onclick="ClickTd();">AAA</td>  
  24. <td>BBB</td>  
  25. </tr>  
  26. </table>  
  27. </body>  
  28. </html>  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xlh91118/p/3456354.html