用JS阻止事件冒泡

 事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

可以用JS来阻止js事件冒泡。因为浏览器的差异IE和FF的JS写法有点不一样。 IE用cancelBubble=true来阻止而FF下需要用stopPropagation方法。 下一下完整的代码：

 

[html]
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <htmlxmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/> 
  5. <title>无标题文档</title> 
  6. <scripttype="text/javascript"> 
  7. function aaaclick(){ 
  8.     alert("td click"); 
  9. } 
  10. function bbbclick(evt){ 
  11.     alert("td click"); 
  12.     if (window.event) { 
  13.         event.cancelBubble = true; 
  14.     }else if (evt){ 
  15.         evt.stopPropagation(); 
  16.     } 
  17. } 
  18. function trclick(){ 
  19.     alert("tr click"); 
  20. } 
  21.  
  22. function tableclick(){ 
  23.     alert("table click"); 
  24. } 
  25. </script> 
  26.  
  27. <styletype="text/css"> 
  28. <!-- 
  29. .tab { 
  30.     border: 1px solid #0066FF; 
  31.     cellpadding:0px; 
  32.     cellspacing:0px; 
  33. } 
  34. .tab td{ 
  35.     border: 1px solid #0066FF; 
  36. } 
  37. --> 
  38. </style> 
  39. </head> 
  40.  
  41. <body> 
  42. <p>点击aaaa会触发上层的onclick事件，点击bbbb不会触发上层onclick事件</p> 
  43. <tablewidth="204"onclick="tableclick()"class="tab"> 
  44.   <tr> 
  45.     <tdwidth="96"></td> 
  46.     <tdwidth="96"></td> 
  47.   </tr> 
  48.   <tronclick="trclick()"> 
  49.     <tdonclick="aaaclick()">aaaa</td> 
  50.     <tdonclick="bbbclick(event)">bbbbb</td> 
  51.   </tr> 
  52.   <tr> 
  53.     <td></td> 
  54.     <td></td> 
  55.   </tr> 
  56. </table> 
  57.  
  58. </body> 
  59. </html> 
posted @ 2013-03-29 11:16  wansimin  Views(135)  Comments(0)    收藏  举报