阻止JS事件冒泡传递（cancelBubble 、stopPropagation）
<%@ 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）的更多相关文章
- JQuery 阻止js事件冒泡 阻止浏览器默认操作
//阻止事件冒泡 event.stopPropagation(); //阻止浏览器默认操作 event.preventDefault(); 代码不一定能执行,写给自己看的. 事件冒泡: <a h ...
- js 事件冒泡、事件捕获、stopPropagation、preventDefault
转自:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: ...
- js事件冒泡和捕捉
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...
- JS事件冒泡
JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素. 事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这 一过程被 ...
- 什么是JS事件冒泡？
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...
- JS事件冒泡及阻止
事件冒泡及阻止 当一个元素接收到事件的时候,会把他接收到的事件传给自己的父级,一直到window,当然其传播的是事件,绑定的执行函数并不会传播,如果父级没有绑定事件函数,就算传递了事件,也不会有什么表 ...
- js事件冒泡、阻止事件冒泡以及阻止默认行为
事件冒泡 当事件发生后,这个事件就要开始传播(从里到外或者从外向里).为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上.例如我们点击一个按钮时, ...
- 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了
哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...
- 理解js事件冒泡事件委托事件捕获
js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...
随机推荐
- 【git学习二】git基础之git管理本地项目
1.背景 git基础打算分两部分来说,一部分是对于本地项目的管理,第二部分是对于远程代码仓库的操作. git运行本地项目管理包含对于相关文件的追踪,暂存区的比較分析,提交,撤销等功能. ...
- Swift中NSData与NSDictionary之间的相互转换
原创Blog,转载请注明出处 使用NSKeyedUnarchiver类来进行相互转换 1.NSDictionary转NSData var dictionaryExample : [String:Any ...
- UBUNTU系统常用基本命令
1.系统基本信息查询查看内核#uname -a 查看Ubuntu版本#cat /etc/issue 查看内核加载的模块#lsmod 查看PCI设备#lspci 查看USB设备#lsusb 查看网卡状态 ...
- centos 6 编译安装httpd-2.4
centos6 yum安装的apr版本已经不适用httpd-2.4版本了.所以,需要源码编译apr以及apr-util 1. 下载源码: cd /usr/local/src/ wget http:// ...
- android——fragment详解
在android开发过程中,如果使用到了导航栏.那么不可避免的就需要使用fragment来处理界面.闲着没事,就详解一下Framgent的使用方法吧. 难得写一次.本人 shoneworn shone ...
- asp.net + Jquery 实现类似Gridview功能 （一）
不知不觉2015年就过去一半了,由于过年前后公司人员陆续离职(这个...),项目忙不过来,从过年来上班就一直在忙,最近项目终于告一段落,开始步入正轨(不用天天赶项目了).所以最近才有时间写这个东西,可 ...
- activity的生命周期详解
刚在看mars老师的视频,看到activity的生命周期,就看了一下,总结了一下.下面是各函数的调用时机 为了更清楚的看清楚工作的具体过程,举例如下: ,建立两个activity,一个main,一个a ...
- Hadoop配置文件-mapred-site.xml
name value Description hadoop.job.history.location job历史文件保存路径,无可配置参数,也不用写在配置文件里,默认在logs的history文件 ...
- Mysql JOIN优化。
join性能自行百度,google 数据60w+,这里我只测试了一个limit , ) ,) AS C LEFT JOIN table2 AS B ON C.e_id=B.id; ) ,;
- 如何在Eclipse中查看Android API源码以及support包源码
http://my.eoe.cn/futurexiong/archive/181.html 开发第三方Android应用的,大多数人应该还是Eclipse结合ADT来开发.那么大多数时候我们可能希望点 ...