- 综合排序
- 最热优先
- 最新优先
- 来自专栏全栈技术
JavaScript 怎么处理事件冒泡？
前言 在JavaScript中，事件冒泡是一种常见的事件传播机制。它可以让嵌套的元素接收到父元素触发的事件。本文将介绍事件冒泡的概念，并提供处理事件冒泡的方式和示例代码。 事件冒泡的处理方式 在处理事件冒泡时，有两种常用的方式：停止事件冒泡和使用事件委托。 停止事件冒泡 通过停止事件冒泡，可以阻止事件继续向父元素传播。 使用事件委托 事件委托是一种将事件处理程序绑定到父元素而不是每个子元素的技术。通过事件委托，可以利用事件冒泡的特性，将事件处理委托给父元素来管理。 通过事件冒泡，可以让嵌套的元素接收到父元素触发的事件。在处理事件冒泡时，可以采用停止事件冒泡和使用事件委托两种方式。 示例代码展示了停止事件冒泡和使用事件委托的实现方式，帮助读者更好地理解事件冒泡的处理方法。通过灵活运用事件冒泡的处理方式，可以更好地处理和管理JavaScript中的事件。
67110编辑于 2023-06-27 - 来自专栏李维亮的博客
事件冒泡 ，阻止事件冒泡 e.stopPropagation()
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>阻止冒泡</title> <script src="script 在上面的函数中，先弹出 “我是li”然后弹出“我是ul”，最后弹出“我是div” 一层一层的<em>冒泡</em>，而阻止<em>冒泡</em>的方式就是调用 <em>事件</em>的对象来调用stopPropagation()方法。 ： 1.一个<em>事件</em>起泡对应触发的是上层的同一<em>事件</em> 单击two的时候就会起泡触发one单击的<em>事件</em>。 单机tree时，会同时触发two，然后触发one 2.如果在click<em>事件</em>中，在你要<em>处理</em>的<em>事件</em>之前加上e.preventDefault(); 那么就取消了行为（通俗理解：相当于做了个return操作） 3.e.stopPropagation()只要在click<em>事件</em>中，就不会触发上层click<em>事件</em>。
2.7K30发布于 2021-07-09 - 来自专栏liulun
FLEXFLASH-冒泡事件与非冒泡事件
刷新页面 点击“外部BTN” 结果如图所示 因为事件的引发者没有在panl1中所以不会再触发panel1的事件了 以上说的都是非冒泡事件，事件的执行顺序是从外层容器到内层容器执行的 5. 如果要在事件冒泡阶段捕捉事件 创建事件的代码为 var Event:btnEvent1=new btnEvent1(btnEvent1.EVENT_NAME,true);//最后一个参数bubbles应为 是false 这样设置后就是冒泡事件，事件的执行顺序是从内层容器到外层容器执行的 6. 如果即要捕捉非冒泡事件，又要捕捉冒泡事件 那么 创建事件的代码为 var Event:btnEvent1=new btnEvent1(btnEvent1.EVENT_NAME,true);//最后一个参数 );//非冒泡监听 this.panel1.addEventListener(btnEvent1.EVENT_NAME,panelCatchEvent,false);//冒泡监听 这样设置之后，事件先从外部执行到内部
1.1K10编辑于 2022-05-09 - 来自专栏Porschev[钟慰]的专栏
Jquery 事件冒泡
什么是JS事件冒泡？ ： 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播 （摘自网络） 如何来阻止Jquery事件冒泡？ ，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转） 2.return false; 事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转） 还有一种有冒泡有关的 会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度 它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）
3.6K70发布于 2018-01-16 - 来自专栏前端开发ZEHAN
js事件冒泡
什么是冒泡？ DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。 事件冒泡**（***dubbed bubbling***）**：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。 dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。 参数 useCapture 是选填的，填true或者false，用于描述事件是冒泡还是捕获，true表示捕获，默认的false表示冒泡。 stopPropagation()方法 } else { window.event.cancelBubble = true; //否则，我们需要使用IE的方式来取消事件冒泡
13.7K42发布于 2020-10-26 - 来自专栏epoos.com
事件冒泡与事件捕获
javascript 的事件捕获和事件冒泡之前一直没能弄明白，知道看到一个例子。 当石头到达池塘底部(事件被捕获)之后，产生了一个气泡，然后就开始了冒泡阶段 由底部（目标元素）产生的气泡，由内而外，不断向上冒泡，直到最外面（html标签）结束。 点击可查看示例 去示例中试一试便清楚了~ 处理事件 理解了事件的捕获和冒泡机制，对于事件处理就好办了。 capture 表示是否在捕获阶段处理函数 ps：默认为 false，表示在冒泡阶段处理函数，ie 低版本浏览器不支持在捕获阶段处理函数。 ，比如是在‘石头’下沉或者‘气泡’冒泡的过程中使之突然消失 事件代理： 从上面事件机制可以看出，如果没有外部干扰，在子节点上触发的事件，在捕获和冒泡最终都会经过父节点 因此，我们可以将事件处理函数绑定在父节点上面
2.1K10编辑于 2022-06-06 - 来自专栏Devops专栏
jquery 事件冒泡、阻止事件冒泡 - event.stopPropagation()
什么是事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播 ，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 事件冒泡的作用 事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。 事件冒泡的示例 编写三个嵌套的div，同时绑定click事件，来演示事件冒泡。 ? 设置了阻止冒泡传递之后，那么click()事件就不会传递到father和grandfather的事件，所以只有一个alert()弹出。 完整事件冒泡示例代码 <!
7K41发布于 2019-06-02 - 来自专栏小蔚记录
js --- 事件冒泡 事件捕获
先上结论： 他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。 绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。 Jquery的e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。 事件的触发顺序自内向外，这就是事件冒泡。 事件触发顺序变更为自外向内，这就是事件捕获。 方法： 阻止事件冒泡 和默认行为。 事件冒泡： ? 阻止默认行为： ?
14.8K20发布于 2019-09-11 - 来自专栏前端专栏
JS事件流、事件冒泡、阻止冒泡、事件捕获（一看就懂）
讲 事件冒泡 、阻止冒泡 和 事件捕获 之前先说说什么是事件流，这样会更容易明白 一、事件和事件流 1、什么是事件 事件是可以被 JavaScript 侦测到的行为。 一个完整的JS事件流是从window开始，最后回到window的一个过程。 事件流被分为三个阶段(1~ 5)捕获过程、(5~ 6)事件触发过程、(6~ 10)冒泡过程。 二、事件冒泡 看了上面的那张图应该对事件冒泡有了大概的了解了吧。总结来说就是： 当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window。 三、阻止冒泡 1、JS阻止事件冒泡 我们用 e.stopPropagation() 这个方法添加到某事件函数里的末尾，就可以做到阻止冒泡事件。 2、JQ阻止事件冒泡 jq阻止事件冒泡就简单了，直接在事件函数里面添加 return false; 就行了。
21.8K64编辑于 2022-06-09 - 来自专栏编程社区
js 事件冒泡和事件捕获
事件冒泡： 事件冒泡由IE团队提出来的，即事件开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。 IE9，chrome，Firefox，Opera，Safari都支持事件冒泡，并将事件冒泡到window对象。 如下，点击obj3，依次弹出obj3、world、hello。 ： 方式一：event.stopPropagation(); 方式二：return false; return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。 event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。 alert('obj3'); },true)//依次弹出hello、world、obj3 </script> </body> removeEventListener() 删除DOM2级事件处理程序
3.8K30编辑于 2022-01-26 - 来自专栏全栈程序员必看
js事件防止冒泡
事件目标 如今。事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，可是没有被全部浏览器实现 。 停止事件传播 事件对象还提供了一个.stopPropagation()方法，该方法能够全然阻止事件冒泡。 以便訪问事件对象。然后。通过简单地调用event.stopPropagation()就能够避免其它全部DOM元素响应这个事件。这样一来，单击button的事件会被button处理。 这样的行为与我们讨论的事件处理程序不是同一个概念，它是单击锚元素的默认操作。类似地，当用户在编辑完表单后按下回车键时。会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。 事件传播和默认操作是相互独立的两套机制，在二者不论什么一方发生时，都能够终止还有一方。假设想要同一时候停止事件传播和默认操作，能够在事件处理程序中返回false。
3.4K40编辑于 2022-07-10 - 来自专栏授客的专栏
Vue 阻止事件冒泡
Vue 阻止事件冒泡 by:授客 QQ：1033553122 开发环境 Win 10 element-ui "2.8.2" Vue 2.9.6 事件冒泡简介 如下图，当我们点击页面某个元素时，会产生点击事件 ，事件由外到内，逐层递进（事件捕获阶段，途中的1->2->3->4），当目标元素捕捉到目标事件时，会响应事件，并由内到外，逐层往外传递(事件冒泡阶段，图中的4->5->6->7)，这便是事件冒泡。 正式因为冒泡机制，当用户点击图中目标元素div时，5,6,7事件区的元素都会响应点击事件（如果具备响应事件能力的话） ? 结论 综合实验1,2,3可知，如果想阻止哪个元素的事件冒泡（即事件只针对该元素有效），只要给该元素的事件增加.stop修饰符即可。 .capture 表示在“事件捕获阶段”监听事件，即在事件捕获阶段回调事件处理函数。
4K10发布于 2020-06-23 - 来自专栏小孟开发笔记
uniapp阻止事件冒泡
在uniapp项目中，经常会遇到父元素有一个点击事件，其子元素也有一个点击事件，但我们只想触发子元素事件，可是父元素也跟着触发了。 我们这时需要给子元素加上阻止事件冒泡就行了 <view @click="myParent()"> //子元素方法 <view @click.stop="mySon()"></view> </view> @click.stop 就是阻止事件冒泡的写法 未经允许不得转载：肥猫博客 » uniapp阻止事件冒泡
4.2K20编辑于 2023-03-07 - 来自专栏Creator星球游戏开发社区
CreatorPrimer|触摸事件冒泡
触摸事件捕获！继续对话： ? 至此问题终于解决，下来的公众号内容也有了着落 ? ！ 在CCScrollView.js源码中搜“TOUCH_END”关键字，找到TOUCH事件注册的代码： ? 看看这里有与自己平时注册TOUCH事件有什么不同？ 相信你已经发现了，关键在最后一个参数：useCapture，用于是否捕获子节点事件，又称之为向下冒泡（默认是向上冒泡），下面以TOUC_END事件为例，简单说明一下： this.node.on( cc.Node.EventType.TOUCH_END , //触摸事件类型 this. _onTouchEnded, //事件处理函数 this, //事件处理函数的this上下文（使用箭头函数时通常被省略）
1.7K30发布于 2019-09-11 - 来自专栏mySoul
事件冒泡和传播
举栗子 事件输出hello world 事件有两种，一种为事件传播，一种是事件冒泡 事件传播和事件冒泡 这还要从遥远的荒诞说起，两家网景和ie，为了能争夺市场，互相使用相反的技术，当网景使用事件传播的时候 ，ie使用事件冒泡。 （两个正好相反）这个时候w3c来了，为了能规范规定，直接取折中，当事件发生时，先发生向下传播，当到底了以后再次使用事件冒泡，逐渐的冒泡到顶层window DOM为一个完整的树 使用事件传播输出hello 否则为事件传播 冒泡为上，事件传播为下，事件传播优于事件冒泡 [15.gif] 可以明确的知道，此时为false为冒泡，即全部向上传播，这个比较简单不在阐述 阻止进一步冒泡 // 获取元素 var div1 ，为向下，且传播优先于冒泡 并且事件先进行向上传，直到遇到设置为冒泡的元素的时候，停止向上传，开始进行从上到下的捕获，先最外层捕获，然后逐层捕获，直到完成。
1.2K60发布于 2018-08-13 - 来自专栏前端架构与工程
浅谈事件冒泡
前端开发中不可避免会接触到事件冒泡，今天简单记录一下处理事件冒泡的一点经验，谈不上心得，聊当抛砖引玉。 不谈移动端，以PC浏览器的click事件为例。 事件冒泡机制最初是由微软提出的，而事件捕捉机制是由NetScape提出的，这两种机制是完全不同的事件流处理机制，平常较多地被认为是事件冒泡的两种方式，其实是不严谨的。 冒泡事件流 简单来讲，以click为例，冒泡事件流就是从被点击的节点一层层的向上冒泡，直到<body>节点，这也是被大多数人熟知的方式，在此便不再赘述。 捕捉事件流 NetScape提出的捕捉式事件流处理机制，跟冒泡事件流完全相反，是从最外层容器(也就是<body>)开始往里传递事件。 false的时候，捕捉事件流跟冒泡事件流的顺序是一致的，也就是从里往外传递。
62890发布于 2018-01-30 - 来自专栏javascript学习笔记
事件流、事件捕获和事件冒泡的介绍
事件流、事件捕获和事件冒泡的介绍 最近有用到对应的场景，下班了特地来整理下响应的概念，巩固下知识。 我们在点击页面时，事件发生时会在各元素节点按照一定的顺序进行传播，这种传播过程就称作事件流。 事件流分为三个阶段： 1、事件捕获阶段 事件从window发出，不断向子元素寻找对应的目标节点 2、事件目标阶段 事件找到了对应的目标节点，即此时再往下已经没有对应的节点 3、事件冒泡阶段 事件从节点位置网上回溯到文档的根节点 我们在使用给dom添加事件时一般使用addEventListener方法，该方法传入三个参数 1、对应的事件名称如：click 2、函数：触发对应的交互响应后执行的函数 3、userCapture：指定事件是在捕获还是冒泡阶段执行 :26 btn 事件捕获 test.html:23 btn 事件冒泡1 test.html:29 btn 事件冒泡2 test.html:34 container 事件冒泡 test.html:15 body 事件冒泡 可以看到，都是先触发捕获再触发冒泡事件，先从body（上）到btn（下），再从btn（下）到body（上）。
1.7K00编辑于 2022-02-18 - 来自专栏Spring Cloud设计原理
解析Javascript事件冒泡机制
类似地，对某一个节点而言，如果不想它现在处理的事件继续往上冒泡的话，我们可以终止冒泡： 在相应的处理函数内，加入 event.stopPropagation() ,终止事件的广播分发，这样事件停留在本节点 ; } }); } </script> 比较： 从事件传递上看：方法一在于取消事件冒泡，即当某些节点取消冒泡后，事件不会再传递；方法二在于不阻止冒泡，过滤需要处理的事件 ，事件处理后还会继续传递； 优缺点： 方法一缺点：为了实现点击特定的元素显示对应的信息，方法一要求每个元素的子元素也必须终止事件的冒泡传递，即跟别的元素功能上强关联，这样的方法会很脆弱 比如，如果span 元素的处理函数没有执行冒泡终止，则事件会传到div2 上，这样会造成div2 的提示信息； 方法二缺点：方法二为每一个元素都增加了事件监听处理函数，事件的处理逻辑都很相似，即都有判断 我们再来分析一下方法二：方法二的原理是 元素收到事件后，判断事件是否符合要求，然后做相应的处理，然后事件继续冒泡往上传递； 既然事件是冒泡传递的，那可不可以让某个父节点统一处理事件，通过判断事件的发生地
1K40发布于 2019-05-25 - 来自专栏smy
事件委托与阻止冒泡
简单说下事件委托与阻止冒泡 html:
-
<li class="active_sort_opts" data-id $("ul[data-type='cityPick']").on('click','li',function(){
alert("子元素li被点击");
});
当点击具体的li元素时，发现ul的事件也被触发了 父元素ul被点击");
});
$("ul[data-type='cityPick']").on('click','li',function(e){
e.stopPropagation();//阻止冒泡 alert("子元素li被点击");
});
加一句阻止冒泡即可。
2.3K100发布于 2018-04-03 - 来自专栏Czy‘s Blog
JS事件冒泡及阻止
事件冒泡及阻止 当一个元素接收到事件的时候，会把他接收到的事件传给自己的父级，一直到window，当然其传播的是事件，绑定的执行函数并不会传播，如果父级没有绑定事件函数，就算传递了事件，也不会有什么表现 事件冒泡的原因是事件源本身可能没有处理事件的能力，即处理事件的函数并未绑定在该事件源上。它本身并不能处理事件，所以需要将事件传播出去，从而能达到处理该事件的执行函数。 实例 当点击id为i3的
时，浏览器会依次弹出3 2 1，这就是事件冒泡，此正方形处于叶节点上，对其操作的事件会向上进行冒泡，直到根节点。 <! 有时候我们并不希望事件冒泡而去执行上级节点绑定的事件，这时候就需要阻止事件的冒泡，w3c的方法是e.stopPropagation()，IE则是使用 window.event.cancelBubble 注意 不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload。 事件解决方案方式在不同浏览器，可能是有所区别的，有些不支持捕获型方案，多数浏览器默认冒泡型方案。7.6K20发布于 2020-08-27
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号