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 ...
随机推荐
- mac 常用地址
1.hosts 配置文件地址 /private/etc/hosts 2.apache 配置文件地址 /etc/apache2/httpd.conf 3.Xcode 插件地址 ~/Library/A ...
- node 常用命令
nvm nvm list 列出安装的node npm install -g cnpm --registry=https://registry.npm.taobao.org 安装cnpm npm i ...
- 【Unity3D】AR应用中，关于东南西北方位的判断。
这篇文章的应用场景是这样子的: 首先我们要做的是一个带有LBS定位服务(比如高德地图.百度地图等)AR功能,在这个场景中,会有一些地图上的”点“(如派出所.学校)是我们需要显示在我们的AR镜头上的,如 ...
- CSS-学习笔记一
CSS(层叠样式表)做网页的外观 四种样式: 权重: 行内样式>内嵌式>链接式 1. 行内样式 <div style="color:red;font-size:30px&q ...
- PL/SQL 将旧表的一些字段赋值给新的表中的字段的做法
INSERT INTO 新表(字段1,字段2,.......) SELECT 字段1,字段2,...... FROM 旧表
- visio二次开发初始化问题
(转发请注明来源:http://www.cnblogs.com/EminemJK/) 问题: axDrawingControl1初始化失败((System.ComponentModel.ISuppor ...
- [译]JavaScript源码转换:非破坏式与再生式
原文:http://ariya.ofilabs.com/2013/06/javascript-source-transformation-non-destructive-vs-regenerative ...
- FreeCodeCamp练习笔记
CSS样式表: 嵌套:body是最外层包围其他所有HTML元素(标签),其中的元素样式都可覆盖body的样式. 覆盖:同一元素有多个样式,位置靠后的样式覆盖位置靠前的样式. id:id与位置无关,可任 ...
- bzoj1441 MIN
Description 给出n个数(A1…An)现求一组整数序列(X1…Xn)使得S=A1*X1+…An*Xn>0,且S的值最小 Input 第一行给出数字N,代表有N个数 下面一行给出N个数 ...
- LYDSY模拟赛day2 Market
/* orz claris,这个题的解法非常巧妙,首先是时间问题,其实这个问题只要离线处理一下就可以了,把物品和询问都按照时间排序,然后看一下能不能满足.然后,因为容量<=10^9,显然是不可能 ...