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

Jquery阻止事件冒泡 event.stopPropagation_jquery

php中文网
发布： 2016-05-16 17:58:32
原创
1190人浏览过

描述： 防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。

version added: 1.0
event.stopPropagation()
我们可以用 event.isPropagationStopped() 来确定这个方法是否(在那个事件对象上)调用过了。

这个方法对 trigger() 来自定义的事件同样有效。

注意，这不会阻止同一个元素上的其它事件处理函数的运行。

Additional Notes:
自从.live()方法处理事件一旦传播到文档的顶部，live事件是不可能停止传播的。同样地，.delegate() 事件将始终传播给其中包含的被委托元素；元素上的事件将在被委托事件被调用的时候执行。
Example:
灭掉click事件的冒泡。

KAIZAN.ai
KAIZAN.ai

使用AI来改善客户服体验，提高忠诚度

KAIZAN.ai 35
查看详情 KAIZAN.ai
复制代码 代码如下:

$("p").click(function(event){
event.stopPropagation();
// do something
});


东西并不难，主要是记录下其中的阻止事件冒泡。

　　因为div添加了单击事件，div内部的img也添加了单击事件，所以当单击img时会先触发img上的单击事件，再触发div上的单击事件，这就是事件冒泡。

　　在Jquery中我们可以很方便的阻止他。

　　如下

复制代码 代码如下:
event.stopPropagation();

　　这样一来单击img就不再触发div的单击事件啦

复制代码 代码如下:

$('div').click(function(){
var $div = $(this);
if($div.find('img').size() > 0){
return;
}else{
$div.css('backgroundColor','#e1f0f3');
$('Jquery阻止事件冒泡 event.stopPropagation_jquery').
appendTo($(this)).click(function(event){
$div.css('backgroundColor','#ffffff');
$(this).remove();
event.stopPropagation();
}).css('margin-left','10px');
}
});
相关标签：
事件冒泡

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：用nodejs访问ActiveX对象，以操作Access数据库为例。_javascript技巧 下一篇：扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁_jquery
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript类型检查_TypeScript接口设计 TypeScript的接口用于定义对象结构，支持属性、方法、函数类型约束、类实现及接口继承。通过静态类型检查提升代码质量与开发效率。
2025-11-19 08:58:31
764
JavaScript游戏开发_物理引擎集成与优化 选择适合的物理引擎并正确集成可显著提升JavaScript游戏的真实感与交互性。Matter.js轻量易用，适合2D益智或平台类游戏；Box2D通过WebAssembly提供高精度物理模拟，适用于对真实性要求高的项目；p2.js支持复杂多边形碰撞与约束系统，适合机械或车辆模拟。以Matter.js为例，首先引入库文件，创建引擎和渲染器，添加刚体对象到世界中，再启动引擎与渲染即可实现基本物理效果。为保证性能，应控制活动物体数量、简化碰撞形状、使用固定时间步长、合理设置求解器迭代次数，并及时清理废弃
2025-11-19 08:24:50
485
JavaScript事件系统_自定义事件分发 通过CustomEvent和dispatchEvent可实现JavaScript自定义事件，用于组件间解耦通信。首先创建携带数据的事件对象，再分发到指定元素，其他模块通过addEventListener监听该事件并获取数据，适用于表单与图表等跨模块交互场景。
2025-11-19 08:09:02
842
代码拆分：React.lazy与Suspense实现 React.lazy与Suspense可实现组件动态加载，减少初始包体积，提升首屏性能；通过import()动态引入组件，Suspense包裹并设置fallback加载提示，结合ReactRouter实现路由级代码拆分，配合ErrorBoundary处理加载失败，保障用户体验完整。
2025-11-19 07:23:34
790
JavaScript_消息队列与事件驱动架构 JavaScript通过消息队列和事件循环实现异步编程，消息队列暂存异步回调，事件循环在调用栈为空时将任务依次推入执行，微任务优先于宏任务，事件驱动架构则通过监听用户或系统事件触发回调，两者协同确保异步任务有序执行且不阻塞主线程。
2025-11-19 04:21:35
377
JavaScript错误处理_Try_Catch最佳实践 答案：合理使用try-catch需精准捕获可预期错误，如JSON解析或外部数据处理，避免包裹大段代码；在catch中通过error.name区分SyntaxError、TypeError等并分类处理，保留堆栈信息且不暴露敏感细节；异步操作中结合async/await与try-catch或Promise的.catch()确保异常被捕获，同时记录上下文日志并上报监控系统。
2025-11-19 02:37:21
392
ApexCharts在React Flexbox布局中的响应式调整与多图表集成 本文深入探讨了在React应用中将ApexCharts集成到Flexbox布局时常见的尺寸调整问题，特别是图表高度在窗口缩放时显示异常。核心解决方案在于确保图表容器拥有适当的弹性高度，并正确配置ApexCharts组件的尺寸属性。此外，文章还提供了在React中有效渲染多个ApexCharts实例的正确方法，避免了常见的组件结构错误，旨在帮助开发者构建响应式且功能丰富的仪表盘。
2025-11-18 23:28:00
684
JavaScript Canvas游戏开发：修复不显示的常见问题与调试指南 本文旨在解决JavaScript游戏在HTMLCanvas中无法正常显示的问题。核心原因通常包括Canvas元素未正确获取、关键变量（如帧计数器）未声明以及随机数生成等辅助函数实现不当。教程将详细介绍如何初始化Canvas上下文、定义必要变量和函数，并强调利用浏览器控制台进行调试的重要性，帮助开发者构建流畅的Canvas游戏体验。
2025-11-18 23:06:01
594
Phaser教程：向游戏对象组添加新子元素 Phaser中的游戏对象组（Group）是管理和操作多个游戏对象集合的关键工具。本文将详细介绍如何使用Group对象的create()方法，在运行时高效地创建并向组中添加新的子元素，涵盖其基本用法、参数配置以及在不同类型组（如普通游戏对象组和物理组）中的应用，以优化游戏场景管理。
2025-11-18 22:47:25
472
JavaScript数组浅比较优化实践 本文探讨了在JavaScript中高效进行数组浅比较的方法。从传统的基于循环的比较方式入手，逐步过渡到利用Array.prototype.every()方法实现更简洁、函数式风格的解决方案。文章详细阐述了两种方法的实现逻辑、代码示例及其在实际应用中的考量，并强调了浅比较与深比较的区别与适用场景。
2025-11-18 22:18:18
534
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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

  • PHP学习

  • 技术支持

  • 返回顶部