开发者社区> cometwo123> 正文

关于js中的冒泡事件

2015-11-12 1360

简介：

+关注继续查看

js冒泡事件
前几天在老大那里接触到了js的一个新的单词：冒泡事件；

何为冒泡事件。
就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作。但是父div的onclick事件同样会被触发。这就造成了事件的多层并发，导致了页面混乱。这就是冒泡事件。
消除冒泡事件的方法
阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）
下面的一段代码即可以很好的解释是么是冒泡效果，什么叫消除冒泡效果

<html>
<head>
<title> 阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）</title>
<meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" />
<script type="text/javascript">
function doSomething (obj,evt) {
alert(obj.id);
var e=(evt)?evt:window.event; //判断浏览器的类型，在基于ie内核的浏览器中的使用cancelBubble
if (window.event) {
e.cancelBubble=true;
} else {
//e.preventDefault(); //在基于firefox内核的浏览器中支持做法stopPropagation
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>

把代码直接复制后，打开当点击child1时不仅会弹出 child1 对话框还会弹出 parent1

这就是冒泡事件

但是单击chile2只会弹出child2却不会弹出 parent2，这便是应用了阻止冒泡事件的特效的效果.

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

JavaScript 前端开发 Web App开发

JavaScript事件 JavaScript冒泡 JavaScript冒泡事件

开发者社区 > 开发与运维 > 文章

云迁移中心

作者高分内容

更多

js 恶心的遍历 2485 圆环百分比 2681 jQuery旋转插件jqueryrotate,制作转盘 2638 经典的js 代码段 2212 未知图片宽高水平垂直居中 1874

相关文章

vohelon

JavaScript 函数和事件

JavaScript 函数和事件

19 0

初映CY的前说

javaScript 07 DOM事件进阶

DOM事件中事件流、事件委托、scroll、offset方法的使用

36 0

初映CY的前说

JavaScript 06 DOM-事件初步

事件监听、常见事件（焦点鼠标输入等事件）

32 0

前端歌谣

js基础笔记学习221事件2

js基础笔记学习221事件2

18 0

前端歌谣

js基础笔记学习250事件委派1

js基础笔记学习250事件委派1

81 0

前端歌谣

js基础笔记学习249事件的冒泡2

js基础笔记学习249事件的冒泡2

16 0

前端歌谣

js基础笔记学习248事件的冒泡1

js基础笔记学习248事件的冒泡1

14 0

前端歌谣

js基础笔记学习252事件委派3

js基础笔记学习252事件委派3

10 0

前端歌谣

js基础笔记学习251事件委派2

js基础笔记学习251事件委派2

11 0

前端歌谣

js基础笔记学习254事件的捕获2

js基础笔记学习254事件的捕获2

8 0

+关注

cometwo123

文章

问答

作者高分内容

更多

js 恶心的遍历 2485 圆环百分比 2681 jQuery旋转插件jqueryrotate,制作转盘 2638 经典的js 代码段 2212 未知图片宽高水平垂直居中 1874

文章排行榜

最热

最新

1 fastjson2为什么这么快 74886

2 7年资深后端带你读懂Redis源码，共总结了这7点心得 68013

3 一个业务前端关于成长的心路历程 64214

4 CVPR2021 | 视觉推理解释框架VRX：用结构化视觉概念作为解释网络推理逻辑的「语言」 63527

5 实现人机协同高稳定性，阿里云5G专网IoT方案入选工信部优秀解决方案 54126

6 内存溢出、内存泄露的概述及常见情形 50157

7 快速开发光伏电站数字孪生运维系统（一） 44676

8 使用 DataAnnotations（数据注解）实现模型的通用数据校验 43162

9 Hive数据倾斜的原因以及常用解决方案 33198

10 高并发编程之阻塞队列 32756

11 Java的Stream操作详解 31656

12 Spring 事务【隔离级别与传播机制】 30507

13 性能优化之使用vue-worker插件（基于Web Worker）开启多线程运算提高效率 29515

14 计网之初识网络(理解网络传输的基本流程) 28026

15 Android体系课之--LeakCanary内存泄露检测原理解析 25945

16 DataWorks管控台无法配置PAI引擎临时解决方案 42526

17 零基础快速开发Vue图书管理系统—登录注册篇（一） 22692

18 IoT设备数据的存储、解析和价值挖掘实践 22656

19 【实战企业级Java二】渐进式理解Redis分布式锁 22498

20 IoT Studio 物联网可视化应用搭建开发实践 21313

1 ChatGpt与EdgeGpt 115

2 玖章算术CEO叶正盛在杭州人工智能小镇AIGC论坛发表主题演讲 56

3 Flink 流批一体方案在数禾的实践 111

4 超丰厚奖池｜天池达人积分榜，有你而不凡！ 159

5 今天出门你查老黄历了吗？包括万年历在内的超多免费可用 API 推荐（一） 68

6 关于几天前出的 MinIO 敏感信息泄露漏洞，分享两种扫描方法 160

7 五分钟！获得轻量级的云原生应用控制平面 118

8 域名资讯 - XYZ注册局域名报告-2023年2月 61

9 数据备份浅谈 140

10 阿里云com和cn域名注册代金券免费领取 70

11 简要聊聊UNIX,MINIX,LINUX,BSD的区别与特质 27334

12 Flink Table Store 独立孵化启动，Apache Paimon 诞生 475

13 云原生一站式：以PolarDB为代表的阿里云瑶池数据库，带领国产数据库换道超车 175

14 银行卡四要素验证API接口怎么用 68

15 云数据库行业动态【2023年3月版】 144

16 阿里云贾少天：阿里云ECS CloudOps新能力与最佳实践分享 13521

17 一篇文章带你分清楚JWT、JWS与JWE 13836

18 CentOS7.9下的docker实战应用 58

19 【ASPLOS 2023】图神经网络统一图算子抽象uGrapher，大幅提高计算性能 65

20 【数据库设计与实现】第6章：并发控制 121

相关课程

更多

JavaScript 自学手册文档教程

3237

65

去学习

JavaScript入门与实战

19234

52

去学习

jQuery UI 速成

589

53

去学习

相关电子书

更多

Javascript异步编程

立即下载

Javascript中的对象

立即下载

JS零基础入门教程（上册）

立即下载

相关实验场景

更多