//阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象，则是一个非IE浏览器 if(e && e.stopPropagation) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则，我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; }
1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>js事件冒泡 </title> 6 <meta name="keywords" content=""/> 7 <meta name="description" content=""/> 8 9 <style type="text/css"> 10 *{margin:0;padding:0;} 11 body{font-size:16px;font-family:"微软雅黑";color:#666; 12 background:#fff; 13 } 14 #tab{width:100%;margin:60px auto;;} 15 #tab td{height:35px;line-height:35px;text-align:center;} 16 </style> 17 </head> 18 <body> 19 20 21 22 23 <table id="tab" border="1"> 24 <tr> 25 <td><input type="checkbox" /></td> 26 <td>111</td> 27 <td>222</td> 28 <td>333</td> 29 <td>444</td> 30 <td>555</td> 31 <td> 32 <a href="javascript:;" onclick="del(event);">删除</a> 33 <a href="javacsript:;" onclick="edit(event);">编辑</a> 34 </td> 35 </tr> 36 <tr> 37 <td><input type="checkbox" /></td> 38 <td>111</td> 39 <td>222</td> 40 <td>333</td> 41 <td>444</td> 42 <td>555</td> 43 <td> 44 <a href="javascript:;" onclick="del(event);">删除</a> 45 <a href="javacsript:;" onclick="edit(event);">编辑</a> 46 </td> 47 </tr> 48 <tr> 49 <td><input type="checkbox" /></td> 50 <td>111</td> 51 <td>222</td> 52 <td>333</td> 53 <td>444</td> 54 <td>555</td> 55 <td> 56 <a href="javascript:;" onclick="del(event);">删除</a> 57 <a href="javacsript:;" onclick="edit(event);">编辑</a> 58 </td> 59 </tr> 60 <tr> 61 <td><input type="checkbox" /></td> 62 <td>111</td> 63 <td>222</td> 64 <td>333</td> 65 <td>444</td> 66 <td>555</td> 67 <td> 68 <a href="javascript:;" onclick="del(event);">删除</a> 69 <a href="javacsript:;" onclick="edit(event);">编辑</a> 70 </td> 71 </tr> 72 <tr> 73 <td><input type="checkbox" /></td> 74 <td>111</td> 75 <td>222</td> 76 <td>333</td> 77 <td>444</td> 78 <td>555</td> 79 <td> 80 <a href="javascript:;" onclick="del(event);">删除</a> 81 <a href="javacsript:;" onclick="edit(event);">编辑</a> 82 </td> 83 </tr> 84 </table> 85 <script type="text/javascript"> 86 //点击td给tr加上一个背景色，同时选中checkbox 87 var tdDoms = document.querySelector("table").getElementsByTagName("td"); 88 for(var i=0;i<tdDoms.length;i++){ 89 tdDoms[i].addEventListener("click",function(){ 90 var mark = this.parentElement.querySelector("input").checked; 91 if(!mark){ 92 this.parentElement.style.background = "red"; 93 this.parentElement.querySelector("input").checked = true; 94 }else{ 95 this.parentElement.removeAttribute("style"); 96 this.parentElement.querySelector("input").checked = false; 97 } 98 }); 99 } 100 101 function del(e){ 102 alert(9); 103 //e.stopPropagation(); 104 stopBubble(e); 105 } 106 107 function edit(e){ 108 alert(8); 109 stopBubble(e); 110 } 111 //阻止事件冒泡的兼容写法 112 function stopBubble(e){ 113 //如果提供了事件对象，则是一个非IE浏览器 114 if(e && e.stopPropagation) 115 //因此它支持W3C的stopPropagation()方法 116 e.stopPropagation(); 117 else 118 //否则，我们需要使用IE的方式来取消事件冒泡 119 window.event.cancelBubble = true; 120 } 121 </script> 122 </body> 123 </html>