JS 事件冒泡 示例代码
作者:bea
<!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> <title>JS中的事件冒泡</title> <script
<!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>
<title>JS中的事件冒泡</title>
<script type="text/javascript"><!--
function ClickTr()
{
alert("TR");
}
function ClickTd()
{
alert("TD");
//如果不加下面的代码点击先会弹出TD然后弹出TR,原因是HTML是对象结构当点击AAA的时候(执行),会冒泡到TR-->table-->body->document->window,当用event.cancelBubble=true的时候就说明阻止该冒泡行为
event.cancelBubble=true;
}
// --></script>
</head>
<body>
<div style="background-color:Azure;" style="background-color:Azure;">目的当点击BBB的时候弹出TR,当点击AAA的时候弹出TD</div>
<table>
<tr onclick="ClickTr();">
<td onclick="ClickTd();">AAA</td>
<td>BBB</td>
</tr>
</table>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
- 让JavaScript 轻松支持函数重载 (Part 1 - 设计)
- JavaScript 异步调用框架 (Part 6 - 实例 & 模式)
- javascript 支持链式调用的异步调用框架Async.Operation
- JavaScript 异步调用框架 (Part 5 - 链式实现)
- JavaScript 异步调用框架 (Part 4 - 链式调用)
- JavaScript 异步调用框架 (Part 3 - 代码实现)
- JavaScript 异步调用框架 (Part 2 - 用例设计)
- JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
- jQuery 相关控件的事件操作分解
- 利用javascript实现一些常用软件的下载导航
- [原创]javascript 定时广告显示(两个时间段)
- jQuery 隔行换色 支持键盘上下键,按Enter选定值
- 一句话JavaScript表单验证代码
- JavaScript 关键字屏蔽实现函数
- Javascript 验证上传图片大小[客户端]
- Javascript 汉字字节判断
- JS 输入字数判断实现代码
- JS 面向对象的5钟写法