//阻止事件冒泡的兼容写法
function stopBubble(e){
//如果提供了事件对象，则是一个非IE浏览器
if(e && e.stopPropagation)
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js事件冒泡 </title>
<meta name="keywords" content=""/>
<meta name="description" content=""/> <style type="text/css">
*{margin:0;padding:0;}
body{font-size:16px;font-family:"微软雅黑";color:#666;
background:#fff;
}
#tab{width:100%;margin:60px auto;;}
#tab td{height:35px;line-height:35px;text-align:center;}
</style>
</head>
<body> <table id="tab" border="1">
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
<td>
<a href="javascript:;" onclick="del(event);">删除</a>
<a href="javacsript:;" onclick="edit(event);">编辑</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
<td>
<a href="javascript:;" onclick="del(event);">删除</a>
<a href="javacsript:;" onclick="edit(event);">编辑</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
<td>
<a href="javascript:;" onclick="del(event);">删除</a>
<a href="javacsript:;" onclick="edit(event);">编辑</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
<td>
<a href="javascript:;" onclick="del(event);">删除</a>
<a href="javacsript:;" onclick="edit(event);">编辑</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
<td>
<a href="javascript:;" onclick="del(event);">删除</a>
<a href="javacsript:;" onclick="edit(event);">编辑</a>
</td>
</tr>
</table>
<script type="text/javascript">
//点击td给tr加上一个背景色，同时选中checkbox
var tdDoms = document.querySelector("table").getElementsByTagName("td");
for(var i=0;i<tdDoms.length;i++){
tdDoms[i].addEventListener("click",function(){
var mark = this.parentElement.querySelector("input").checked;
if(!mark){
this.parentElement.style.background = "red";
this.parentElement.querySelector("input").checked = true;
}else{
this.parentElement.removeAttribute("style");
this.parentElement.querySelector("input").checked = false;
}
});
} function del(e){
alert(9);
//e.stopPropagation();
stopBubble(e);
} function edit(e){
alert(8);
stopBubble(e);
}
//阻止事件冒泡的兼容写法
function stopBubble(e){
//如果提供了事件对象，则是一个非IE浏览器
if(e && e.stopPropagation)
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
</script>
</body>
</html>