微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

JS冒泡事件的快速解决方法_javascript技巧

php中文网
发布： 2016-05-16 17:08:59
原创
1505人浏览过

何为冒泡事件
就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作。但是父div的onclick事件同样会被触发。这就造成了事件的多层并发，导致了页面混乱。这就是冒泡事件。

消除冒泡事件的方法
阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）

下面的一段代码即可以很好的解释是么是冒泡效果，什么叫消除冒泡效果

复制代码 代码如下:



阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）





this is parent1 div.



This is child1.



this is parent1 div.






This is parent2 div.

猫眼课题宝
猫眼课题宝

5分钟定创新选题，3步生成高质量标书！

猫眼课题宝 262
查看详情 猫眼课题宝


This is child2. Will bubble.

立即学习“Java免费学习笔记（深入）”；



This is parent2 div.






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

这就是冒泡事件

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

相关标签：
js 冒泡事件

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：JS实现模仿微博发布效果实例代码_javascript技巧 下一篇：JSON无限折叠菜单编写实例_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
在Angular Electron应用中实现基于RxJS的用户闲置屏幕保护 本教程旨在指导如何在AngularElectron桌面应用中实现一个应用层面的用户闲置屏幕保护功能。文章将重点介绍如何利用RxJS的fromEvent和debounceTime操作符高效检测用户在指定时间内的无操作状态，并据此触发屏幕保护的显示与隐藏，提供一个灵活且性能优化的解决方案，避免了对系统全局闲置状态的依赖。
2025-11-30 13:40:16
604
Web Component中自定义开关组件状态同步的深度解析与实践 本文深入探讨WebComponent中自定义开关组件在处理checked状态时可能遇到的视觉同步问题。核心在于区分HTML属性与DOM属性的差异，并强调对于原生表单元素，应优先通过其DOM属性（如input.checked=true/false）而非直接操作HTML属性（setAttribute）来更新状态，以确保视觉与逻辑的一致性。文章通过代码示例详细阐述了问题根源及正确的解决方案。
2025-11-30 13:38:13
956
分析随机参数递归函数：基线条件计数与时间复杂度解析 本文深入探讨了一个使用随机参数进行分治的递归函数。我们将揭示为何其基线条件（basecase）的执行次数，尽管涉及随机性，却始终保持恒定。通过分析递归树的结构，特别是证明输入n等同于内部节点的数量，并结合满二叉树的性质，我们解释了这一现象。最终，文章推导出该函数的线性时间复杂度，即O(n)。
2025-11-30 13:37:19
395
使用JavaScript从点分隔字符串动态构建嵌套JSON对象 本文介绍如何利用JavaScript将一个点分隔的键字符串（如global.fontsize.bodyscale）与一个给定值currValue组合，动态地生成一个多层嵌套的JSON对象结构。核心方法是使用split()和reduceRight()函数，通过从内到外逐层封装的方式实现，高效且代码简洁。
2025-11-30 13:37:02
407
React列表渲染中独立元素状态管理的最佳实践 本教程旨在解决React应用中列表项状态管理不当导致点击事件影响所有元素的问题。我们将通过优化数据结构，为每个列表项引入独立的布尔状态，并结合不可变更新原则，精确控制单个元素的行为，确保交互事件仅触发目标项的特定效果，从而实现更精细、可预测的用户界面。
2025-11-30 13:36:02
283
JavaScript数组扁平化深度解析：理解concat行为与高效实现 本教程深入探讨JavaScript数组扁平化过程中的常见误区，特别是Array.prototype.concat()方法在不重新赋值时为何无法实现预期效果。我们将详细解释concat的非原地修改特性，并提供两种高效且现代的解决方案：利用ES6的展开运算符（spreadoperator）将元素推入新数组，以及使用内置的Array.prototype.flat()方法，通过具体代码示例演示如何正确地扁平化嵌套数组。
2025-11-30 13:35:30
127
JavaScript：高效实现对象数组到键值数组的转置 本教程旨在详细介绍如何在JavaScript中将一个包含多个JSON对象的数组转置为一个新的对象，其中新对象的键是原对象中的所有属性名，而值则是对应属性名在所有原对象中的值组成的数组。我们将通过一个高效且易于理解的函数实现这一常见数据转换需求。
2025-11-30 13:34:00
764
如何准确获取网站在Google的收录页面总数及优化管理 本文旨在提供获取网站在Google搜索引擎中收录页面总数的权威指南。针对常见编程抓取尝试的局限性和不可靠性，我们强烈推荐使用GoogleSearchConsole作为官方且全面的解决方案。它不仅能提供准确的索引数据，还能帮助网站管理员深入了解网站的索引状态、发现并解决潜在问题，从而有效提升网站在Google的可见性和表现。
2025-11-30 13:33:37
268
Vue Router配置正确但路由未生效的疑难排查与解决方案 本文深入探讨了VueRouter配置看似正确但路由未生效的疑难问题。通过回顾VueRouter的基础配置，并结合一个实际案例，揭示了这类问题可能并非源于代码逻辑错误，而是由底层文件系统或版本控制系统异常导致。文章提供了标准的排查思路，并强调了在面对难以解释的现象时，考虑外部环境因素的重要性，最终给出了有效的解决方案。
2025-11-30 13:26:09
901
基于配置生成Angular动态导航菜单与递归组件实践 本教程详细介绍了如何在Angular应用中，利用递归组件和配置数据动态构建多级导航菜单。通过定义清晰的数据接口、创建可自引用的组件，并结合*ngFor指令和@Input装饰器，实现从嵌套配置对象到交互式UI元素的无缝转换。文章涵盖了组件结构、模板逻辑、数据绑定及关键实践，旨在帮助开发者高效地构建灵活、可维护的动态菜单系统。
2025-11-30 13:12:22
696
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部