HTML TR与TD事件

当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>

 

posted @ 2012-05-23 18:22  only_copy  阅读(2387)  评论(0)    收藏  举报