JQuery document click 中防止事件冒泡

AspNetSunny AspNetSunny 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 2.3k累计阅读 2.3k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄15年
关注
原创 最新推荐文章于 2026-08-03 12:35:29 发布 2.3k 阅读 AI 写同款· GEO 优化 ›
jQuery事件系统：解剖前端事件底层原理与工程实践 事件处理是前端开发的核心基础能力，涉及事件流（捕获/冒泡）、事件对象生命周期、事件委托等关键概念。理解这些原理不仅关乎DOM交互正确性，更直接影响React SyntheticEvent、Vue指令修饰符等现代框架特性的掌握深度。jQuery事件系统虽非生产首选，却以极简API暴露了浏览器原生事件机制的本质抽象，尤其在跨浏览器兼容性处理、事件委托实现、命名空间隔离等工程细节上具有不可替代的教学与调试价值。本文聚焦事件模型的三层解构——从W3C规范定义的物理执行流程，到jQuery对event对象的norma 阅读详情

 return false; 按钮或任何HTML元素 点击后return；

demo：

$("#classtitle").click(function(event){
     		$("#div-tree").slideToggle();
     		return false;
     	});

$(document).click(function(event) {
		    $("#div-tree").hide();
		});

it's easy right!奋斗

收录于
jQuery

当前文章被收录于：

jQuery
24 篇文章 0 人学习
订阅专栏 查看详情
标签
#jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
Zemax 中的 LED 阵列模型 这些光线是所有光线的子集，用于布局可视化，而不是详细分析。X 和 Y 散度（αx 和 αy）以度为单位，以不同的方式设置为 6 度和 12 度。每个 LED 都以朗伯模式（广角分布）发光，尽管有些 LED 具有内置光学元件，用于更窄或更聚焦的光束。，具体取决于这些类别中使用的半导体材料。LED 阵列由多个发光二极管 （LED） 组成，这些二极管以特定模式或配置排列，以实现均匀照明、更高强度或特定照明特性。如果数据的存在更改为“辐射强度”，则它以弧度为单位显示每个立体角的功率，作为探测器上入射角的函数。 阅读详情

相关推荐

进阶数据结构——链式前向星

链式前向星是一种进阶的数据结构，主要用于图的存储。我希望大家先看这个视频（蓝色字体点进去） 不然你很难理解的。在图论中，图的存储方式主要有邻接矩阵和邻接表两种。邻接矩阵虽然建图简单方便，但占内存较大，节点数量稍微大点的题目就难以使用（适合稠密图）；而邻接表虽然节省空间，但其指针形式难写易错，且vector形式的读取速度较慢，易导致大数据下的超时（TLE）。针对上述问题，链式前向星作为一种折中的方式应运而生。链式前向星本质上是一种静态链表，它将数据以链表形式连接在一起。

ycs66的博客 2137

绑定事件的冒泡与阻止冒泡事件的发生

$(document).on('click',function(){ $(ul).css('display','none'); });//此时如果ul没有被隐藏的时候点击ul的话，会发生冒泡事件，通过点击自己的话自己也是可以被隐藏的，因此要阻止冒泡事件的发生，使其点击自己的时候自己不被隐藏$(ul).on('click',function(e){ e.stopPropagatio

feiyan939的博客 358

基于 LSTM 的船舶轨迹预测，单步预测

基于 LSTM 的船舶轨迹预测，单步预测

fyuhao的博客 1万+

jquery 事件冒泡、阻止事件冒泡 - event.stopPropagation()

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

DevOps海洋的渔夫@专栏 1172

ArcGIS中利用DEM数据生成地形图既视感的等高线；利用掩膜进行等高线注记；DEM的可视化表达总结

文章目录前言一、效果图展示二、地形（DEM）可视化表达1.一维可视化2.二维可视化2.三维可视化二、ArcGIS中利用DEM数据制作等高线2.三维可视化2.三维可视化2.三维可视化2.三维可视化二、ArcGIS中利用DEM数据制作等高线2.三维可视化2.三维可视化2.三维可视化总结 前言 最近老师布置作业：DEM的可视化表达。想做一个等高线地形图那样、看起来高级一点的等高线，可是我看网上大多数教程都只展示了【等值线】工具，做出来效果都一般。我自认为自己做出来的效果还可以，把步骤分享给大家。 一、

pink_pig__的博客 5万+

整车 EOL下线 测试系统介绍

整车下线（EOL）测试专门针对整车进行设计开发，是车企将组装好的整车交付客户前的 最后一道检测工序。EOL 测试针对的是整车下线测试，不同于零部件下线，是整车级别的下线 测试，测试过程关系整车的每个零部件，其测试质量直接影响到整车的质量好坏。因此，整车EOL测试是整车下线必不可少的测试过程.

王小奎的博客 5487

Js阻止事件冒泡和document.onclick在IE浏览器上无效

北京 北京 上海 广州 深圳 刚开始上面的html对应上面的效果，当点击上面的框出现下拉的城市列表，当不选择列表中的选项也就是点击页面空白处，下拉的城市列表消失

lululove19870526的专栏 1310

T12 电烙铁简单程序逻辑

通过分析就可以知道，发热丝本身即是发热体，也是热偶的工作端。怎么可能是热电动势呢，确实，但不要忘了T12-OUTPUT端的电压是PWM波，理论上是有单片机PWM电压为0 v时的，而T12-OUTPUT端的电压此时也应为0。在T12烙铁头中，PID控制算法通过监测温度传感器的输出，计算当前温度与设定温度之间的差异，并根据这一差异调节加热功率，以实现烙铁头温度的精确控制。这段代码实现了一个简单的增量式PID控制器，通过计算当前温度与期望温度之间的差异以及历史偏差值，调节输出控制量，实现对温度的精确控制。

hgkhjkljnl的博客 1万+

阻止事件冒泡和围绕.on()方法 [.selector]事件委托中冒泡情况的探讨

2019-7-23更新： 1. document和body代理事件，在某些浏览器无效，目前发现在微信浏览器无效。 2. 前端使用模板引擎渲染的节点，可能滞后与事件的绑定，因此这种情况下最适合事件代理。 一、事件冒泡和阻止事件冒泡 事件冒泡是JavaScript的核心概念之一，它的原理很简单，但真正应用起来还是有不少的坑。 这里说一说关于阻止事件冒泡的本质。 我们都知道阻止事件冒泡...

Alcantara的博客 2909

绝缘检测是什么？ 绝缘检测原理 绝缘检测检测的是什么？那个量？电压？电流？电阻？

绝缘电阻是电气设备和电气线路最基本的绝缘指标。对于低压电气装置的交接试验，常温下电动机、配电设备和配电线路的绝缘电阻不应低于0.5MΩ(对于运行中的设备和线路，绝缘电阻不应低于1MΩ/kV)。 绝缘电阻的正确测量方法 现代生活日新月异，人们一刻也离不开电。在用电过程中就存在着用电安全问题，在电器设备中，例如电机、电缆、家用电器等。 影响因素 环境温湿度 一般材料的绝缘电阻值随环境温湿度的升高而减小。相对而言，表面电阻(率)对环境湿度比较敏感，而体电阻(率)则对温度较为敏感。 湿度增加，表面泄漏增大，导体电导

dianqicyuyan的博客 2万+

vue2/3 - 详细实现高德地图轨迹回放，vue高德地图车辆历史行驶轨迹播放，在地图上绘制行程轨迹|起点和终端的路程绘制|用户运动轨迹绘制及播放等（支持开始/暂停、进度条拖放、控制播放轨迹的倍速等）

vue2，vue3，nuxt，高德地图，轨迹，vue高德地图轨迹回放，历史轨迹回放，轨迹回放功能支持倍速及进度条拖拽，VUE高德地图轨迹回放、倍速调整、进度条拖拽，vue3高德地图轨迹回放，Vue实现地图路径回放，vue中使用高德地图实现历史轨迹回放并能控制播放轨迹的倍速，多条轨迹陆续播放，巡航轨迹做带进度条和倍速的轨迹回放，Vue高德地图路径回放，历史轨迹回放并能控制播放轨迹的倍速，使用高德地图实现轨迹播放和进度条控制，vue高德地图如何实现轨迹回放，高德地图做轨迹绘制用什么api，高德轨迹API，驾车轨

✅ 精选推荐文章 1万+

$().click()和$(document).on(‘click‘,‘要选择的元素‘,function(){})的不同

$().click()和$(document).on('click','要选择的元素',function(){})的不同

马赛克大战的博客 1175

Autosar EcuM配置-初始化及下电执行函数-基于ETAS软件

Autosar EcuM学习笔记-上电初始化执行函数及下电前执行函数，本文介绍在EcuM中的配置及使用。

赞的博客 849

jquery事件有关问题！对象 click和document click冲突有关问题

帮朋友解决这个问题，我发现用以往想想像的方式来实现，貌似不太可行，所以从网上找了一些解决办法，进行优化，这篇比较详细，所以拿来备忘，另一方面也希望可以帮助需要的同学！ 问题背景：jquery事件问题！！对象 click和document click冲突问题 我想点击某个元素显示一个对象， 点击页面任意处，隐藏这个对象    //点击look对象，显示隐藏mydiv  $("#loo

xudanna的专栏 4014

SAP B1中文培訓教材_SDK

公司内部培训资料，对开发工具 ，DIAPI， UIAPI，Add-ON有详细解说

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等，可在创建的窗口进行控制

防止事件冒泡stopPropagation()

定义和用法 stopPropagation(e);不再派发事件。 终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。 说明 该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。 ...

zjungle的博客 514

假人有限元模型

假人模型，车辆碰撞假人有限元模型，适合做乘员安全的研究者利用

关于JQuery中，click与document click冲突问题

解决办法是：防止事件冒泡。 例子 HTML： CSS： #show_div{ display:none; }js： $("#click_btn").click(function(e){ $("#show_div").toggle(); e.stopPropagation(); //return false;(或者)

benyuxy的专栏 8925

jQuery事件

jQuery事件: 一、jQuery页面载入事件 (document).ready()方法当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。简单地说，这个方法纯粹是对向window.load事件注册的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99注意：可以在同一个页面中无限次地使用(document).ready() 方法 当DOM载入就绪可以查询及操纵时绑

weixin_50179284的博客 290

详述jQuery事件

一、使用bind()方法绑定事件 作用：为每个匹配元素的特定事件绑定对应的事件处理函数 格式：bind(type,[data],fn) 其中type表示事件类型，data表示传递给绑定函数的额外数据对象，fn表示绑定的函数 例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8"...

飞翔的企鹅的博客 190

对于 JS 中的，事件冒泡和事件捕获你了解多少 ?

前言 : 在页面中，JS 和 HTML 之间的各种交互，是通过一系列的事件去实现的。那么我们就必须要去掌握 JS 中的事件，事件流，事件冒泡，事件捕获，事件委托等知识。 事件 ？ 事件：是文档或浏览器窗口中发生的一些特定的交互问题。 事件流 ？ 事件流：描述的是页面中接受事件的顺序，它分为两种，事件冒泡和事件捕获，现在主流为事件冒泡。IE9，chrome，Firefox，Opera，Safari 均实现了 DOM2 级规范中定义的标准 DOM 事件，而 IE8 和 IE8 以下版本仍然保..

Wu hao's blog 187

深入解析jQuery事件系统：三层架构、事件委托与实战技巧

DOM事件处理是前端开发的核心基础，它实现了用户交互与页面响应的桥梁。其原理基于事件冒泡与捕获机制，通过监听用户操作触发相应函数执行。这一技术价值在于解耦用户行为与业务逻辑，提升代码可维护性。在应用场景上，无论是传统网站还是现代Web应用，高效的事件管理都至关重要。本文聚焦于jQuery事件系统，它作为一套经典的跨浏览器兼容解决方案，通过统一事件对象、高效的事件存储分发机制和简洁的API层，封装了原生事件的复杂性。其中，事件委托机制能显著优化动态内容交互与性能，而命名空间和自定义事件则为模块化开发提供了便利

weixin_34007020的博客 428

关于点击click事件以及事件绑定的方式

Javascript简单地为一个标签绑定事件写法（不单针对button标签）：<button onclick="click_fn()">click</button> <script> function click_fn(){ console.log(this); } </script>另一种是用DOM Document对象来绑定事件： （注：这

Hello World 3万+

jQuery事件系统深度解析：从核心机制到性能优化实战

事件处理是前端开发的基础概念，它允许网页响应用户交互。其核心原理基于浏览器的**事件流**模型，包括捕获、目标、冒泡三个阶段。理解这一机制是掌握高效事件绑定的关键。在技术价值上，合理的事件管理能显著提升应用性能与可维护性，尤其是在处理动态内容与复杂交互时。**事件委托**正是基于事件冒泡原理的一种高级实践，它将监听器绑定在父元素而非每个子元素上，从而优化内存占用并支持动态添加的元素。**jQuery**作为曾经的主流库，其`.on()`、`.off()`等API对原生事件模型进行了出色封装与统一，提供了跨浏

weixin_34112181的博客 381

jQuery事件系统核心原理：委托、标准化与跨浏览器兼容

事件处理是前端交互的基石，其本质是监听用户行为并触发响应逻辑。原生DOM事件存在单播覆盖、浏览器差异、监听器注册分裂等底层缺陷，导致兼容性差、维护成本高。jQuery通过事件委托实现动态元素零绑定、事件对象标准化统一target/which等属性、命名空间支持精准解绑、生命周期钩子控制触发语义，构建起健壮的事件操作系统。这些机制不仅解决了IE与现代浏览器的兼容难题，更成为Vue、React等框架事件设计的思想源头。本文聚焦事件委托与事件对象标准化两大核心热词，解析其在真实业务场景（如动态列表操作、表单验证、

unixboy 525

点击div和某些控件之外的地方隐藏div，点击div不隐藏。对象 click和document click冲突有关问题...

帮朋友解决这个问题，我发现用以往想想像的方式来实现，貌似不太可行，所以从网上找了一些解决办法，进行优化，这篇比较详细，所以拿来备忘，另一方面也希望可以帮助需要的同学！ 问题背景：jQuery事件问题！！对象 click和document click冲突问题 我想点击某个元素显示一个对象， 点击页面任意处，隐藏这个对象 //点击look对象，显示隐藏mydiv$("#look").bind...

weixin_30420305的博客 107

阻止事件冒泡

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

iteye_8535的博客 144

js的事件传播过程

1.事件传播的三个过程，事件捕获阶段、处于目标阶段、事件冒泡阶段。 2.事件捕获由远及近逐渐靠近事件目标，事件冒泡由事件目标逐渐向上冒泡 3.在捕捉阶段，事件从document对象沿着文档树向下传播给目标节点。如果目标的任何一个祖先注册了捕捉事件句柄，那么在事件传播的过程中，就会运行这些句柄 4.发生在目标节点自身，这与0级事件模型提供的事件处理方法类似。 就是传说中的气泡阶段，在这个阶段，事件将...

lh13585的博客 710

防止父元素事件被子元素触发

当前父元素被绑定的单击事件(onclick)时，防止被其子元素触发执行。 HTML 子元素 JS $(document).on('click', '.Dialog', function(e){ // 判断触发事件的DOM元素 是否为 本身绑定的DOM元素 if(e.target === $(this)[0]){ // 用户事务处理代码 } });

正文 3361
上一篇： php 环境配置。
下一篇： 7个高性能JavaScript代码高亮插件
点赞 0
评论 0
书签 书签 0
AspNetSunny
AspNetSunny
博客等级 码龄15年 21粉丝 112原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值