<!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 881<html> <head> ... -
提交数据时，用层覆盖父页面
2011-04-22 13:52 994<script LANGUAGE="J ... -
frame框架
2011-01-18 17:22 908<frameset rows="20% ... -
Ajax 抓页面
2010-12-17 17:37 789引用 <html> <head> ... -
js 打印部分页面
2010-12-14 13:38 1157//打印js function preview() ... -
页面实现打印功能
2010-11-29 15:38 803<html> <head> ... -
那些相见恨晚的 JavaScript 技巧
2010-11-26 14:35 724http://51bcw.com/article-html-3 ... -
自定义 方法
2010-11-04 09:42 708function $(o){return document.g ... -
js 将数字转化为汉字
2010-10-26 09:31 6213<html> <head&g ... -
checkbox只读
2010-08-14 16:37 744<input type="checkbox&q ... -
html中select在js中的操作
2010-08-14 00:11 1352//添加 var Select1= document.getE ... -
js table 行数|js table row|js table td|js 操作Table
2010-08-13 23:39 5438兼容FF，IE的table属性操作， 1，得到表格的行数与 ... -
window.showModalDialog返回多个参数的问题
2010-08-11 23:27 1204a.htm: <SCRIPT language=&quo ... -
web可视化编辑器
2010-08-04 11:14 939web可视化编辑器在线编辑器 http://www.edojs ... -
iframe解决跨域
2010-07-28 17:48 1336.iframe的使用A域中有parent.html,B域中有c ... -
用Script绕行动态注入解决跨域的问题
2010-07-28 17:43 1590<script> /*************** ... -
在InnerHTML中执行js代码(一位教授解决了这个问题)
2010-07-28 17:32 2153<script> /* innerhtml.js ... -
监听父窗口的变化自适应子页面的高度
2010-07-28 17:16 2825<script> /*************** ... -
JS通用库函数
2010-07-28 15:49 20851.ifLetter 判断字符串是否都是 ...
相关推荐
`index.html`通常是网页的结构，而`min.js`可能包含了压缩过的JavaScript代码，用于演示阻止事件冒泡的实现。通过查看这两个文件，我们可以更深入地理解阻止事件冒泡的实践应用。 总结一下，阻止事件冒泡是...
在JavaScript中，我们可以使用`event.stopPropagation()`方法来阻止事件冒泡。当我们在监听的事件处理函数中调用这个方法时，可以确保事件不会继续向上层元素传播。例如，如果我们在一个内部元素上监听`mousewheel`...
// 不仅阻止冒泡，也阻止了事件本身 }); }); <div id="ee">aaaaa <a href="baidu.com">baidu.com</a> ``` 在这个例子中，点击按钮时会触发多个事件处理函数，但通过使用`event.stopPropagation();`和`...
// 阻止冒泡事件 // 取消事件冒泡 var e = arguments.callee.caller.arguments[0] || event; // 若省略此句，下面的e改为event，IE运行可以，但是其他浏览器就不兼容 if(e && e.stopPropagation){ // Mozilla和...
### JS阻止事件冒泡行为 在Web开发中，事件冒泡是一种浏览器处理事件的机制。当我们点击页面上的某个元素时，事件不仅仅会在该元素上触发，还会传递到其父级元素，最后直至文档的根元素。在多数情况下，这种机制是...
在处理事件时，有时我们需要阻止默认行为或者防止事件冒泡，以确保事件按照我们的预期执行。本篇将详细介绍`event.preventDefault()`和`event.stopPropagation()`的用法，并提供示例。 1. **阻止默认事件**： 当一...
在JavaScript的世界里，事件冒泡是一个重要的概念，它是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上转播至最不具体的节点（文档）的过程。jQuery库提供了方便的方式来处理DOM...
此外，`event.stopPropagation()`方法可以阻止事件继续向上冒泡，而`event.stopImmediatePropagation()`则不仅可以阻止冒泡，还能阻止同一元素上的其他事件处理函数被执行。 总结一下，JavaScript事件冒泡是浏览器...
<%@ Page Language=C# AutoEventWireup=true CodeFile=Default5.aspx.csInherits=Default5%> <!DOCTYPE ...<... <head runat=server>...Porschev--
js阻止冒泡事件的方法有2种。 事件冒泡：当一个元素上的事件被触发时，同样的事件会在那个元素的所有祖先元素中被触发。 这个事件是从原始元素开始一直冒泡到DOM树最上层。 目标元素：任何一个事件的目标元素...
对于页面中的`div.c1`，当它被单击时，会触发一个事件，但是不会阻止冒泡；而`div.c2`则不同，单击时会触发`stopBubble`函数，从而阻止事件继续向上冒泡。同样地，对于文本框`#txt1`，当它被点击或按键触发时，会...
将这个函数添加到需要阻止冒泡的事件处理函数内部即可实现预期效果。 总的来说，理解和熟练运用`event.stopPropagation()`、`event.cancelBubble`以及`event.preventDefault()`是编写健壮的JavaScript事件处理程序...
在JavaScript的世界里，事件冒泡是一个非常重要的概念，它描述了事件从最深的节点开始向上级节点传播的过程。在jQuery库中，开发者可以利用其提供的API来控制这一过程，特别是当需要阻止事件沿DOM树向上层元素传播时...
1. `cancelBubble`函数内部首先判断浏览器是否支持`stopPropagation`方法，这是W3C标准中的事件阻止冒泡方法。对于不支持此方法的老版本IE浏览器，它会使用`cancelBubble = true`来达到相同的效果。 2. 在`show(info...
但这个方法通常不是用来阻止冒泡，而是为了提前处理事件。 3. **停止事件的默认行为**： 使用`event.preventDefault()`可以阻止事件的默认行为，但并不会阻止事件的冒泡。在本例中，这可能不是必要的，因为默认...