<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Test.WebForm1" %>

<!DOCTYPE html>
<html>
<head>
<title> 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）</title>
<meta name="keywords" content="JS,事件冒泡,cancelBubble,stopPropagation" />
<script>
function doSomething(obj, evt) {
alert(obj.id);
var e = (evt) ? evt : window.event;
if (window.event) {
e.cancelBubble = true; // ie下阻止冒泡
} else {
//e.preventDefault();
e.stopPropagation(); // 其它浏览器下阻止冒泡
}
}
</script>
</head>
<body>
第一种情况：
<div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">
　　<p>This is parent1 div.</p>
　　<div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">
　　　　<p>This is child1.</p>
　　</div>
　　<p>This is parent1 div.</p>
</div>

<br />

第二种情况：
<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
　　<p>This is parent2 div.</p>
　　<div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
　　　　<p>This is child2. Will bubble.</p>
　　</div>
　　<p>This is parent2 div.</p>
</div>
</body>
</html>

效果：

第一种情况：点击橘黄色一栏，alert("child1"),alert("parent1")

　　　　　　点击黄色部分，alert("parent1")

第二种情况：点击灰色浅色部分，alert("child2")

　　　　　　点击剩余部分，alert("parent2")

也就是说，第二种情况，使用了event.cancelBubble()=true阻止了冒泡排序。

-------------------------

<html>
<body>
<table border="1" onclick="alert('table');">
<tr onclick="alert('tr1111');">
<td>第一个</td>
</tr>
<tr onclick="test(event);">
<td>哈哈</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
function test(event)
{
alert("哈哈tr");
event.cancelBubble = true;
}
</script>

冒泡排序，触发子元素时候，事件会由子元素一级级传递到父元素上，父元素也会触发事件。

所以如果使用event.cancelBubble=true能阻止事件的向上传递，也就阻止了冒泡排序。

阻止JS事件冒泡传递（cancelBubble 、stopPropagation）的更多相关文章

  1. JQuery 阻止js事件冒泡 阻止浏览器默认操作

    //阻止事件冒泡 event.stopPropagation(); //阻止浏览器默认操作 event.preventDefault(); 代码不一定能执行,写给自己看的. 事件冒泡: <a h ...

  2. js 事件冒泡、事件捕获、stopPropagation、preventDefault

    转自:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: ...

  3. js事件冒泡和捕捉

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...

  4. JS事件冒泡

    JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素. 事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这 一过程被 ...

  5. 什么是JS事件冒泡？

    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...

  6. JS事件冒泡及阻止

    事件冒泡及阻止 当一个元素接收到事件的时候,会把他接收到的事件传给自己的父级,一直到window,当然其传播的是事件,绑定的执行函数并不会传播,如果父级没有绑定事件函数,就算传递了事件,也不会有什么表 ...

  7. js事件冒泡、阻止事件冒泡以及阻止默认行为

    事件冒泡 当事件发生后,这个事件就要开始传播(从里到外或者从外向里).为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上.例如我们点击一个按钮时, ...

  8. 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

    哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...

  9. 理解js事件冒泡事件委托事件捕获

    js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...

随机推荐

  1. Android系统的开机画面显示过程分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/7691321 好几个月都没有更新过博客了,从今天 ...

  2. C语言的面向对象设计 —— 对 X264/FFMPEG 架构探讨

    1.为什么要用C语言 直到今天,C语言虽然不是使用人数最多的语言了,但是C没有老去,在很多的核心系统代码里,依然跑的是设计精美的C,绝大多数的嵌入式开发核心库软件是C开发的,多数标准算法是基于标准C设 ...

  3. 由于jsp include 很多文件后导致java类大小超过65535 bytes 的解决方法（转载）

    昨天,我遇到了一個讓我很頭疼的問題. 我做了一個共通的jsp,單只測它是ok的,可是,放在別的jsp中include它,就會報錯如標題所示:The code of method _jspService ...

  4. IOS准备

    1.Commond + shift + H 相当于Home键 2.更改项目的名称和icon图标 info.plist文件->bundle name -> 写上工程显示的名字 3.更改ico ...

  5. 我们为什么要遵循W3C标准规范

    大部分的站长和拥有网站的企业负责人都会知道,每当有浏览器发布大更新的时候,我们刚建立不久的网站就会发生无法预知的严重错误,我们只能重新建立或改版网站,使其可以应归新发布的浏览器.好比1996-1999 ...

  6. Struts2 工作流程

    Struts2使用了WebWork的设计核心(XWork),在内部使用拦截器处理用户请求,从而允许用户业务逻辑控制器和ServletAPI分离.Struts2内部是一个MVC架构,Struts2 的核 ...

  7. [Effective Modern C++] Item 5. Prefer auto to explicit type declarations - 相对显式类型声明，更倾向使用auto

    条款5 相对显式类型声明,更倾向使用auto 基础知识 auto能大大方便变量的定义,可以表示仅由编译器知道的类型. template<typename It> void dwim(It ...

  8. python面向对象(上)

    创建类 Python 类使用 class 关键字来创建.简单的类的声明可以是关键字后紧跟类名: class ClassName(bases): 'class documentation string' ...

  9. 设定MS SQL Server 2008定期自动备份

    1.说明 SQL Server2008 本身具有定期自动备份功能,我们只需要通过简单的配置就可以实现非常简单高效的自动备份功能. 2.打开SQL Server代理服务 要实现自动备份功能,首先要保证S ...

  10. JAVA中List与Array之间互换

    1.Array转List ArrayList<String> list = new ArrayList<String>(); String[] arr = new String ...