jquery如何阻止子元素继承父元素的事件（又称事件冒泡）

最新推荐文章于 2023-08-19 11:52:53 发布
原创 最新推荐文章于 2023-08-19 11:52:53 发布 · 4.3k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种简单的方法来阻止事件冒泡，通过在子元素上使用jQuery的mousedown事件并调用event.stopPropagation()方法实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

非常简单，子元素上添加如下代码即可

 $("#div1").mousedown(function(event){
      event.stopPropagation();
  });
关键代码：event.stopPropagation()
前端面试汇总-React
分享前端工程化、动效魔法与性能之舞！
06-29 1418
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
JavaScript学习笔记--进阶之路
JackieDYH的博客
03-16 1831
了解js特性&事件使用 20200316 1、JavaScript简介 历史： 第一个浏览器 就是文本和图片 网景公司 增强用户的使用体验 急需一门语言 实现用户和网页之间的交互 诞生：为了实现用户和网页的交互而出现 1、开发一门新语言 2、使用已经成熟的语言（java<sun> python c ------） ​ 这个时候使用的是java ---...
点击子元素事件不触发父元素事件
05-12
点击子元素，触发子元素事件的同时不触发父元素的时间
jquery怎么在父元素事件中禁止子元素的事件？
qq_41802505的博客
03-11 729
3种方法 1、在父元素事件的function中加if(event.target==this){ } 2、子元素事件function最后加event.stopPropgation（）；// 阻止事件冒泡 3、简单点，直接在子元素事件function最后加return false；// 阻止事件冒泡和默认操作 ...
jquery阻止子元素触发父元素的事件的方法
choumoyin5005的博客
10-28 1252
<div style=" width:300px; height:200px;"> <a href="http://bbs.blueidea.com">点我不要触发</a> </div> 正常情况下，点击a链接会触发div的click事件...
阻止checkbox的父元素事件冒泡
过客阵营 -- 简单的就要最简单
01-15 3704
今天在开发后台权限管理时使用了tinyaccordion 这个小控件,如图所示 这个结构代码大致如下: 在过程中长时间纠结于,点击标注的checkbox也会触发其父元素H3的click事件, 起初对checkbox是监听其 change 事件,不管怎么搞,H3的click事件都会被触发,折腾了3个多小时,使用了各种方法都不行,几乎是把这个小控件完全自己实现了一遍都没有搞定这个问题...
jQuery如何阻止子元素继承父元素事件？
dxh_0829的专栏
06-04 2968
function f1(e){ alert("你点击了一个链接"); //取消冒泡 e.cancelBubble = true; } function f2(e){ alert("你点击了一个DIV"); } ClickMe
前端有关js和jQuery面试题！！！
2301_76766756的博客
08-19 679
捕获阶段(从window对象传导到目标节点(从外到里)，这个阶段不会响应任何事件)，目标阶段， (在目标节点上触发)，冒泡阶段(从目标节点传导回window对象(从里到外))，事件委托/事件代 理就是利用事件冒泡的机制把里层需要响应的事件绑定到外层。所谓的同源，指的是协议，域名，端口相同。函数防抖是需要一个延时器来辅助实现，延迟执行需要执行的代码，如果方法多次触发，把上次记 录的延迟执行代码用cleartimeout清除掉，重新开始，如果计时完毕，没有方法来访问触发，则执 行代码。
WEB 前端面试题 (高能)
m0_64191440的博客
11-11 1418
我们让原型对象等于另一个原型对象的实例,此时原型对象 ,将包含一个指向原型对象的指针，再让原型对象 的实例等于原型对象，如此层层递进就构成了实例和原型的链条，这就是原型链的概念。取得了另外一个值，则原先的引用值引用次数就减 1，当这个值的引用次 数为 0 的时候，说明没有办法再访问这个值了，因此就把所占的内存给。如果你发现你在不同的地方写了大量代码来做同一件事时，就应该考虑将代码重构为可重用的。描述：给一个元素设置了高度和宽度的同时，还为其设置margin和padding的值，会改变该元素的实际大小。
web前端笔试题-完善版
JackieDYH的博客
08-08 1万+
web面试题 1、定位有哪几种？分别简述其特点。 static：默认值，没有定位，元素出现在正常的文档流中 relative：生成相对定位的元素，不脱离文档流，相对于自身位置进行定位 absolute：生成绝对定位的元素，脱离文档流，相对于最近一级的定位，而不是static的父元素来进行定位 fixed：生成绝对定位元素（老IE不支持），脱离文档流，相对于浏览器窗口进行定位 2、请描述一下网页从开始请求到最终显示的完整过程 1.1在浏览器中输入地址 1.2发送到DNS服务器，解析获取域名对应的web服务器
jQuery 防止子元素响应父元素的点击事件
asing1elife's blog
09-28 4179
当父元素绑定了一个 click 事件后，点击其中子元素默认也会相应该事件，如下方式可避免子元素响应父元素的点击事件 更多精彩 更多技术博客，请移步 asing1elife’s blog 实现方式 $(".overlay").click(function(e){ if (e.target == e.currentTarget) { // content ... } }); ...
jquery阻止子元素继承父元素的事件（点击父元素不让子元素响应）
06-02 2713
以下为两种解决方法 1.在父元素的点击事件加上判断语句 $("body,.case_close").click(function (e) { if (e.target == e.currentTarget){//防止父元素覆盖资源的绑定事件操作 //执行父元素的事件 location.href="dsindex.html?page=c" } }) 2.在子元素点击事件加上如下语句 $("#banner").click(function (e) { e
javascript中，表单事件--阻止父类事件的发生
muli
01-13 436
javascript中，表单事件–阻止父类事件的发生
mousedown和click冲突事件，JS怎么实现子元素mousedown不触发父元素的click
m0_61177996的博客
08-09 1112
mousedown和click冲突事件，JS怎么实现子元素mousedown不触发父元素的click
在Vue中子组件click事件触发父组件mousedown事件
qq_40011214的博客
02-17 2056
父组件中使用了@mousedown <div @mousedown="handleMouseDown($event)" 我是父组件按钮 </div> handleMouseDown(e){ // e.stopPropagation() // e.preventDefault console.log("父组件点击了") } 方法就是子组件中不要使用click,也使用mousedown ，然后使用e.preventDefault()与e
jQuery(一)——jQuery事件操作
HangHug_L的博客
02-01 425
1. 页面加载完成之后事件：Dom和jQuery对比 $( function(){ } ); 和 window.onload = function(){} 的区别？ 它们分别是在什么时候触发？ jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签，并创建好 DOM 对象之后就会马上执行。 原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载完成。 它们触发的顺序？ jQuery 的页面加载完成之后先执行 原生 js 的页面加载完成之
jquery点击事件捕获
06-14 960
最近做个小功能仿ECSHOP，动态改变某个dom内容，然后ajax提交保存。不用像平常那样修改个表还需要进入到修改页面然后点击保存。 整体思路不难，假如原来是span或h3，a等标签，点击之后获取内容，然后新增一个input标签，并把value值赋给input。修改完内容之后，input标签blur事件出发之后做正则判断，然后ajax提交后台。成功则把新value值赋给原先的...
阻止子元素继承父元素事件
热门推荐
风火一回，一生不毁
06-15 1万+
DOM事件标准定义了两种事件流，分别是捕获和冒泡。默认情况下，事件使用冒泡事件流，不使用捕获事件流。然而，在Firefox和Safari里，你可以显式的指定使用捕获事件流，方法是在注册事件时传入useCapture参数，将这个参数设为true。 冒泡事件流     当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的D
JS 阻止子元素触发父元素的事件
花铛
10-08 7782
不适用于有多个子元素的情况下，因为要做很多判断；也不适用于子元素内部又嵌套子元素的情况。给它添加阻止冒泡事件就可以了。
jQuery子页面操作父页面元素及交互实现
"这篇文章主要介绍了如何在jQuery中实现子页面获取和操作父页面的元素，以及子页面向父页面添加元素的功能。通过JavaScript的window.opener对象和对话框插件artDialog，我们可以实现跨页面的交互。" 在网页开发中，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值