什么是JS事件冒泡
什么是JS事件冒泡？
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
如何来阻止Jquery事件冒泡？
通过一个小例子来解释
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Porschev---Jquery事件冒泡</title>
<scriptsrc="jquery-1.3.2-vsdoc.js"type="text/javascript"></script>
</head>
<body>
<formid="form1"runat="server">
<divid="divOne"onclick="alert('我是最外层');">
<divid="divTwo"onclick="alert('我是中间层！')">
<aid="hr_three"href="http://www.baidu.com"mce_href="http://www.baidu.com"onclick="alert('我是最里层！')">点击我</a>
</div>
</div>
</form>
</body>
</html>
比如上面这个页面，
分为三层：divOne是第外层，divTwo中间层，hr_three是最里层;
他们都有各自的click事件，最里层a标签还有href属性。
运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层---->然后再链接到百度.
这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。
事件冒泡过程（以标签ID表示）：hr_three---->divTwo---->divOne。从最里层冒泡到最外层。
如何来阻止?
1.event.stopPropagation();
$(function(){
$("#hr_three").click(function(event){
event.stopPropagation();
});
});
<script>
再点击“点击我”，会弹出：我是最里层，然后链接到百度
2.returnfalse;
如果头部加入的是以下代码
$(function(){
$("#hr_three").click(function(event){
returnfalse;
});
});
<script>
再点击“点击我”，会弹出：我是最里层，但不会执行链接到百度页面
由此可以看出：
1.event.stopPropagation();
事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）
2.returnfalse;
事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）
还有一种有冒泡有关的：
3.event.preventDefault();
如果把它放在头部A标签的click事件中，点击“点击我”。
会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度
它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）
什么是JS事件冒泡的更多相关文章
- 什么是JS事件冒泡？
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...
- js事件冒泡和事件委托
js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...
- 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...
- js事件冒泡和捕捉
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...
- 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了
哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...
- 理解js事件冒泡事件委托事件捕获
js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...
- js 事件冒泡、事件捕获、stopPropagation、preventDefault
转自:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: ...
- JS事件冒泡及阻止
事件冒泡及阻止 当一个元素接收到事件的时候,会把他接收到的事件传给自己的父级,一直到window,当然其传播的是事件,绑定的执行函数并不会传播,如果父级没有绑定事件函数,就算传递了事件,也不会有什么表 ...
- 关于JS 事件冒泡和onclick,click,on()事件触发顺序
今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...
随机推荐
- SIM卡尺寸及剪卡教程
手机SIM卡有全尺寸SIM卡.Mini-SIM卡.Micro-SIM卡.Nano-SIM卡.Embedded-SIM卡等类型,目前主流手机基本都是趋向使用Micro-SIM卡和Nano-SM卡. 一. ...
- 剑指offer-面试题13.在O(1)时间删除链表节点
题目:给定单向链表的头指针和一个节点指针,定义一个函数在O(1)时间删除该节点. 链表节点与函数的定义如下. 通常我们删除某个节点都是从头开始遍历到需要删除节点的前一个节点. 然后使得该节点的next ...
- Light OJ 1067 Combinations (乘法逆元）
Description Given n different objects, you want to take k of them. How many ways to can do it? For e ...
- UISearchBar 点击X 按钮收键盘
- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText;{ NSLog(@"textD ...
- N种方法妙讲LIS算法
LIS算法经典汇总 假设存在一个序列d[1..9] = 2 1 5 3 6 4 8 9 7,可以看出来它的LIS长度为5.下面一步一步试着找出它.我们定义一个序列B,然后令 i = 1 to 9 逐个 ...
- 安装MySQLdb-python时无法找到-lprobes_mysql处理一则
安装MySQLdb时,我已经做好了如下两点:1)配置好mysql_config 有两种方式可以做: ① 做个软连接,把mysql_config链接到/usr/local/bin下 ② ...
- 第一个MyBatis程序
最近研究了一些MyBatis技术,虽然工作中还未用到,但是觉得了解一下也是不错的.这里记录了第一个简单的Demo程序,防止自己忘记. 第一步需要配置Mybatis-config.xml文件.注意:这里 ...
- 第五章 Logistic回归
第五章 Logistic回归 假设现在有一些数据点,我们利用一条直线对这些点进行拟合(该线称为最佳拟合直线),这个拟合过程就称作回归. 为了实现Logistic回归分类器,我们可以在每个特征上都乘以一 ...
- OCMOCM
14年,OCM考试费12000 15年,考试费19800 对于我来说,1,2年之后是否换工作还是个未知数 在本单位考这个貌似没什么用处,工资也不会突然就涨很多 跳槽的话,专门做数据库感觉压力还挺大 年 ...
- Oracle如何只显示重复数据，或不显示重复数据
思路: 一.对所有字段进行分组并计数 二.计数大于1的就显示 select * from 表名 group by 字段1,字段2 having count(*)>1 (显示重复)