文档章节

jquery 事件冒泡的介绍以及如何阻止事件冒泡

furw
 furw
发布于 2015/08/07 09:17
字数 666
阅读 91
收藏 8

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

什么是JS事件冒泡? 

在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。


如何来阻止Jquery事件冒泡? 
通过一个小例子来解释 

<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8">
	<title></title>
	<script src="js/jquery-2.1.0.min.js"></script>
    </head>

	<body>
	    <form id="form1" runat="server">
		<div id="divOne" onclick="alert('我是最外层!')">
			<div id="divTwo" onclick="alert('我是中间层!')">
				<a id="hr_three" href="  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(); 

<script> 
    $(function(){ 
        $("#hr_three").click(function(event){ 
        event.stopPropagation(); 
        }); 
    }); 
<script>

再点击“点击我”,会弹出:我是最里层,然后链接到百度 

2.returnfalse; 
如果头部加入的是以下代码 

<script"> 
    $(function(){ 
        $("#hr_three").click(function(event){ 
        return false; 
        }); 
    }); 
<script>


再点击“点击我”,会弹出:我是最里层,但不会执行链接到百度页面 

由此可以看出: 
1.event.stopPropagation(); 
事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(它就执行了超链接的跳转) 
2.returnfalse; 
事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转) 
还有一种有冒泡有关的: 
3.event.preventDefault(); 
如果把它放在头部A标签的click事件中,点击“点击我”。 
会发现它依次弹出:我是最里层---->我是中间层---->我是最外层,但最后却没有跳转到百度 
它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)

© 著作权归作者所有

furw
粉丝 18
博文 44
码字总数 14655
作品 0
海淀
前端工程师
私信 提问
总结jquery使用事件(复合事件、事件绑定等)

本文整理总结jquery事件,在使用jquery开发中,一定会使用到事件,下面是常用的事件。 1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种...

^6^|^6^
2011/12/09
433
0
阻止事件冒泡和浏览器的默认行为

javascript 1.阻止事件冒泡,使成为捕获型事件触发机制. function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器if ( e && e.stopPropagation ) //因此它支持W3C的stopPropaga...

JellyFlower
2014/06/27
550
0
JQuery DOM 事件冒泡

什么是冒泡 在页面上可以有多个事件,也可以多个元素响应同一个事件。假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了click事件,同时body元素上也绑定了click事件。...

尐桀
2012/08/20
262
0
stopPropagation与stopImmediatePropagation的区别

以前只知道js里有个stopPropagation(),不知道还有个stopImmediatePropagation()(本人孤陋寡闻,让大家笑话了),今天看到有段代码里出现了stopImmediatePropagation()这个方法,就研究了一下...

i33
2012/10/25
1K
0
JavaScript事件机制——记一次认真准备的技术分享

先问几个问题,你是否能快速闪过答案? 自下而上(冒泡)事件怎么写,自上而下(捕获)又是怎么写? 捕获型和冒泡型同时存在,谁生效? jquery的on或bind是冒泡,还是捕获? 冒泡能够阻止,那...

闲淡超人
2018/06/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql免安装

参考:http://blog.csdn.net/qq_28569585/article/details/79072805 [mysqld]#设置mysql密码为空#skip-grant-tables#设置3306端口 port = 3306# 设置mysql的安装目录 basedir=E...

秋默
7分钟前
2
0
立足于SpringCloud.H + Netflix-Ribbon + Hystrix断路器(9)

《SpringCloud.H心法总纲》 继续上一篇,接下来Springcloud配置Netflix-Ribbon集成Hystrix断路器的功能。 1、添加依赖 <!--使用hystrix,测试断路器--><dependency> <groupId>org.spr......

木九天
7分钟前
2
0
Dropbox怎么共享文件?Dropbox共享文件操作

Dropbox网盘是国外的一项云存储服务,这意味着即使您使用的是其他设备,您也可以将文件复制到云中并在以后访问它们,目前支持PC、Android和MAC三大平台,为用户带来最精准的资源传输工作。就...

坚果云
10分钟前
5
0
Vant Weapp 1.0 正式版发布

1.0 来了 2018 年 8 月 11 日,我们发布了 Vant Weapp 的首个版本。16 个月以来,我们收到了 27 位开发者贡献的 1000 多次提交,也处理了 1200 多个 issue,发布了 50 多个版本。Github 的 ...

有赞coder
12分钟前
3
0
VCF文件格式详解

VCF文件全称为Variant Call Format,表示基因组的变异信息,通常为GATK和Samtools软件处理所得到。 VCF文件大致可以分为两个部分: 1、以##开头的头文件信息 ##fileformat=VCFv4.2##FILTER...

悲催的古灵武士
12分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部