当Table中TR指定单击事件,且对TD指定单击事件,先执行TD单击,后执行TR单击,也可在TD事件中取消TR事件。event.cancelBubble=true;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
</script>
<body>
<table border="1" width="71%" id="tableA" >
<tr onClick="tr_click()">
<td width="212" height="52" id="abc" onClick="td_click()">td__单击事件测试,并取消行单击</td>
<td width="179" onClick="td_click2()">td__单击事件测试,并继续执行tr__单击事件</td>
<td width="213">tr__单击事件测试</td>
</tr>
</table>
<p>Bubble就是一个事件可以从子节点向父节点传递.
当event.cancelBubble =false时,该事件会传递给父节点。会触发父节点相应的事件。</p>
<p>当event.cancelBubble =true时,该事件不会传递给父节点。只响应子节点对应的事件</p>
<p>比如鼠标点击了一个TD,当前的event.srcElement就是这个TD,但是这种冒泡机制(event.cancelBubble =false)使你可以从TR或者Table处截获这个点击事件,但是如果你event.cancelBubble =true,则就不能上传事件。 </p>
</body>
</html>
<script language="javascript">
function tr_click(){
alert('亲,我是行单击事件');
}
function td_click(){
alert('亲,我是单元格单击事件,并取消行单击事件');
event.cancelBubble=true;
}
function td_click2(){
alert('亲,我是单元格单击事件,接下来要执行行单击事件吆``');
}
</script>