<!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>
<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>
分享到：
发表评论
-
js计算出生年龄
2013-06-22 14:56 772<html> <head> ... -
提交数据时，用层覆盖父页面
2011-04-22 13:52 888<script LANGUAGE="J ... -
frame框架
2011-01-18 17:22 811<frameset rows="20% ... -
Ajax 抓页面
2010-12-17 17:37 686引用 <html> <head> ... -
js 打印部分页面
2010-12-14 13:38 1056//打印js function preview() ... -
页面实现打印功能
2010-11-29 15:38 712<html> <head> ... -
那些相见恨晚的 JavaScript 技巧
2010-11-26 14:35 619http://51bcw.com/article-html-3 ... -
自定义 方法
2010-11-04 09:42 620function $(o){return document.g ... -
js 将数字转化为汉字
2010-10-26 09:31 6107<html> <head&g ... -
checkbox只读
2010-08-14 16:37 638<input type="checkbox&q ... -
html中select在js中的操作
2010-08-14 00:11 1257//添加 var Select1= document.getE ... -
js table 行数|js table row|js table td|js 操作Table
2010-08-13 23:39 5338兼容FF，IE的table属性操作， 1，得到表格的行数与 ... -
window.showModalDialog返回多个参数的问题
2010-08-11 23:27 1116a.htm: <SCRIPT language=&quo ... -
web可视化编辑器
2010-08-04 11:14 835web可视化编辑器在线编辑器 http://www.edojs ... -
iframe解决跨域
2010-07-28 17:48 1214.iframe的使用A域中有parent.html,B域中有c ... -
用Script绕行动态注入解决跨域的问题
2010-07-28 17:43 1504<script> /*************** ... -
在InnerHTML中执行js代码(一位教授解决了这个问题)
2010-07-28 17:32 2048<script> /* innerhtml.js ... -
监听父窗口的变化自适应子页面的高度
2010-07-28 17:16 2631<script> /*************** ... -
JS通用库函数
2010-07-28 15:49 19771.ifLetter 判断字符串是否都是 ...
相关推荐
一种解决事件冒泡的方法，有较好的浏览器兼容性，具体思路参见文档： http://blog.csdn.net/ivyandrich/article/details/22041933
阻止滚动条事件mousewheel冒泡,当网页内部元素滚动条到顶或底时不触发浏览器窗口的滚动条事件。
1.阻止事件冒泡,使成为捕获型事件触发机制. function stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation()...
嵌套的div元素，如果父级和子元素都绑定了一些事件，那么在点击最内层子元素时可能会触发父级元素的事件，下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧
js阻止冒泡及jquery阻止事件冒泡示例介绍.docx
主要介绍了JS阻止事件冒泡行为和闭包的方法的相关资料,需要的朋友可以参考下
本文给大家分享的是一段兼容各大浏览器的JavaScript阻止事件冒泡代码，虽然因为时间问题没有深入研究，但是还是相当不错的，这里推荐给大家
<%@ Page Language=C# AutoEventWireup=true CodeFile=Default5.aspx.csInherits=Default5%> <!DOCTYPE ...<... <head runat=server>...Porschev--
js阻止冒泡事件的方法有2种。 事件冒泡：当一个元素上的事件被触发时，同样的事件会在那个元素的所有祖先元素中被触发。 这个事件是从原始元素开始一直冒泡到DOM树最上层。 目标元素：任何一个事件的目标元素...
主要分享了一则JavaScript阻止事件冒泡示例,需要的朋友可以参考下
JavaScript+jQuery 网页特效设计;鼠标事件;1、鼠标事件;1、鼠标事件（案例）;2、键盘事件;2、键盘事件（案例）;3、事件的冒泡与阻止;3、事件的冒泡与阻止;3、事件的冒泡与阻止;...3、事件的冒泡与阻止
js阻止冒泡 在阻止冒泡的过程中，W3C和IE采用的不同的方法，那么我们必须做以下兼容。 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性，它的值比事件句柄的返回值...
js阻止冒泡 $(document).click(function(){ $(".scxl").children('ul').hide(); })
javascript 中事件冒泡和...Jquery的e.stopPropagation会阻止冒泡，意思就是到DOM为止，祖先级的事件就不要触发了 下面是我尝试的例子： <!DOCTYPE html> <html lang=en> <head> <meta char