HTML TR与TD事件

最新推荐文章于 2024-05-30 11:27:58 发布

akwcaur7967808

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量577

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/only-copy/articles/2515185.html

版权

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

转载于:https://www.cnblogs.com/only-copy/articles/2515185.html

akwcaur7967808

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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-tra...
复制链接

扫一扫

HTML TR与TD事件

“相关推荐”对你有帮助么？