//阻止事件冒泡的兼容写法
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>
