jquery 事件冒泡的介绍以及如何阻止事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理,挺起来感觉这么不可思议，接下来为大家解除疑惑
什么是JS事件冒泡？
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
如何来阻止Jquery事件冒泡？
通过一个小例子来解释
<!DOCTYPE htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Porschev---Jquery事件冒泡</title>
<script src="jquery-1.3.2-vsdoc.js"type="text/javascript"></script>
</head>
<body>
<form id="form1"runat="server">
<div id="divOne"onclick="alert('我是最外层');">
<div id="divTwo"onclick="alert('我是中间层！')">
<a id="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();
<scripttype="text/javascript">
$(function(){
$("#hr_three").click(function(event){
event.stopPropagation();
});
});
<script>
再点击“点击我”，会弹出：我是最里层，然后链接到百度
2.returnfalse;
如果头部加入的是以下代码
<scripttype="text/javascript">
$(function(){
$("#hr_three").click(function(event){
return false;
});
});
<script>
再点击“点击我”，会弹出：我是最里层，但不会执行链接到百度页面
由此可以看出：
1.event.stopPropagation();
事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）
2.returnfalse;
事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）
还有一种有冒泡有关的：
3.event.preventDefault();
如果把它放在头部A标签的click事件中，点击“点击我”。
会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度
它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）
jquery 事件冒泡的介绍以及如何阻止事件冒泡的更多相关文章
- JQuery 提供了两种方式来阻止事件冒泡。
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- js阻止冒泡及jquery阻止事件冒泡示例介绍
js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...
- jQuery阻止事件冒泡的例子
下面给给各位朋友稍加整理了一jquery中阻止事件冒泡的一些例子,我们知道JQuery 提供了两种方式来阻止事件冒泡,但我们简单的利用它来做一些应用可能不深入或不理解,下面整理了更详细的方法,有兴趣的 ...
- JQuery中阻止事件冒泡的两种方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- JQuery中阻止事件冒泡方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function( ...
- JQuery 阻止事件冒泡
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- 阻止事件冒泡两种方式：event.stopPropagation();和return false;
jQuery提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function (event) { ...
- JS如果阻止事件冒泡和浏览器默认事件
原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...
- js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流
嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧 1. event.prev ...
随机推荐
- Hibernate映射文件如何配置触发器
Hibernate映射文件之触发器生成(generated属性.database-object元素) (2013-02-27 12:28:49) 转载▼ 标签: it 分类: JAVA学习笔记 这里分 ...
- jquery 幻灯片 左右滚动
使用jquery封装的一个幻灯片插件 写的好差 参考了别人写的 后面再重构 现在这个应该可以直接用了 主要实现思路就是 添加当前选中状态 index相对应的 选中的图总是在第一位(也就是加选中状态的 ...
- FlexPaper+SWFTool+操作类=在线预览PDF
引言 由于客户有在线预览PDF格式的需求,在网上找了一下解决方案,觉得FlexPaper用起来还是挺方便的,flexpaper是将pdf转换为swf格式的文件预览的,所以flexpaper一般和swf ...
- 10 件有关 JavaScript 让人费解的事情
JavaScript 可算是世界上最流行的编程语言,它曾被 Web 开发设计师贴上噩梦的标签,虽然真正的噩梦其实是 DOM API,这个被大量的开发与设计师随手拈来增强他们的 Web 前端的脚本语言, ...
- codevs2777 栅栏的木料
题目描述 Description 农民John准备建一个栅栏来围住他的牧场.他已经确定了栅栏的形状,但是他在木料方面有些问题.当地的杂货储存商扔给John一些木板,而John必须从这些木板中找出尽可能 ...
- Go - 项目收藏
谷歌官方维护了一个基于go语言的开源项目列表: https://github.com/golang/go/wiki/Projects Web框架 web.go.beego Go项目 httpmq:A ...
- StartUML2.8破解
StarUML官方下载地址:http://staruml.io/download StarUML是一个非常好用的画UML图的工具,但是它是收费软件,以下是破解方法: 1.使用Editplus或者N ...
- VMware中的Ubuntu网络设置
网络配置: VMware安装后会有两个默认网卡,分别是VMnet8(192.168.83.1)和VMnet1(192.168.19.1),当然不同的机器上,这两个网卡的 IP会不同的.在windows ...
- Git命令回顾
团队从Eclipse迁移到Android Studio之后,也从SVN迁移到Git了. 一直忙于需求迭代无暇做迁移,现在才开始做,相见恨晚,好东西,高大上,词穷. 回顾和记录一下git的一些基本操作. ...
- IEnumerable和IQueryable和Linq的查询
IEnumerable和IEnumerable 1.IEnumerable查询必须在本地执行.并且执行查询前我们必须把所有的数据加载到本地.而且更多的时候.加载的数据有大量的数据是我们不需要的无效数据 ...