- 综合排序
- 最热优先
- 最新优先
- 来自专栏全栈技术
JavaScript 怎么处理事件冒泡？
前言 在JavaScript中，事件冒泡是一种常见的事件传播机制。它可以让嵌套的元素接收到父元素触发的事件。本文将介绍事件冒泡的概念，并提供处理事件冒泡的方式和示例代码。 事件冒泡的处理方式 在处理事件冒泡时，有两种常用的方式：停止事件冒泡和使用事件委托。 停止事件冒泡 通过停止事件冒泡，可以阻止事件继续向父元素传播。 使用事件委托 事件委托是一种将事件处理程序绑定到父元素而不是每个子元素的技术。通过事件委托，可以利用事件冒泡的特性，将事件处理委托给父元素来管理。 通过事件冒泡，可以让嵌套的元素接收到父元素触发的事件。在处理事件冒泡时，可以采用停止事件冒泡和使用事件委托两种方式。 示例代码展示了停止事件冒泡和使用事件委托的实现方式，帮助读者更好地理解事件冒泡的处理方法。通过灵活运用事件冒泡的处理方式，可以更好地处理和管理JavaScript中的事件。
68410编辑于 2023-06-27 - 来自专栏李维亮的博客
事件冒泡 ，阻止事件冒泡 e.stopPropagation()
<html xmlns="http://www.w<em>3</em>.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操作） <em>3</em>.e.stopPropagation()只要在click<em>事件</em>中，就不会触发上层click<em>事件</em>。
2.7K30发布于 2021-07-09 - 来自专栏liulun
FLEXFLASH-冒泡事件与非冒泡事件
～～～～" width="189"/> </s:Application> 3. 刷新页面 点击“外部BTN” 结果如图所示 因为事件的引发者没有在panl1中所以不会再触发panel1的事件了 以上说的都是非冒泡事件，事件的执行顺序是从外层容器到内层容器执行的 5. 是false 这样设置后就是冒泡事件，事件的执行顺序是从内层容器到外层容器执行的 6. 如果即要捕捉非冒泡事件，又要捕捉冒泡事件 那么 创建事件的代码为 var Event:btnEvent1=new btnEvent1(btnEvent1.EVENT_NAME,true);//最后一个参数 );//非冒泡监听 this.panel1.addEventListener(btnEvent1.EVENT_NAME,panelCatchEvent,false);//冒泡监听 这样设置之后，事件先从外部执行到内部
1.2K10编辑于 2022-05-09 - 来自专栏Porschev[钟慰]的专栏
Jquery 事件冒泡
什么是JS事件冒泡？ ： 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播 ，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转） 2.return false; 事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转） 还有一种有冒泡有关的 ： 3.event.preventDefault(); 如果把它放在头部A标签的click事件中，点击“点击我”。 会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度 它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）
3.6K70发布于 2018-01-16 - 来自专栏前端开发ZEHAN
js事件冒泡
什么是冒泡？ DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。 事件冒泡**（***dubbed bubbling***）**：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。 dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。 参数 useCapture 是选填的，填true或者false，用于描述事件是冒泡还是捕获，true表示捕获，默认的false表示冒泡。 stopBubble(e) { if (e && e.stopPropagation) { e.stopPropagation(); //因此它支持W3C
13.7K42发布于 2020-10-26 - 来自专栏epoos.com
事件冒泡与事件捕获
javascript 的事件捕获和事件冒泡之前一直没能弄明白，知道看到一个例子。 点击可查看示例 去示例中试一试便清楚了~ 处理事件 理解了事件的捕获和冒泡机制，对于事件处理就好办了。 capture 表示是否在捕获阶段处理函数 ps：默认为 false，表示在冒泡阶段处理函数，ie 低版本浏览器不支持在捕获阶段处理函数。 ，比如是在‘石头’下沉或者‘气泡’冒泡的过程中使之突然消失 事件代理： 从上面事件机制可以看出，如果没有外部干扰，在子节点上触发的事件，在捕获和冒泡最终都会经过父节点 因此，我们可以将事件处理函数绑定在父节点上面
- list1
- list2
- list3
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 - 来自专栏人生代码
Vue 3 事件处理
事件处理 实验介绍 页面上会有很多的页面交互，例如用户点击按钮，会触发什么样的事件，这个事件要做什么事情，就会涉及到事件处理。 有时也需要在内联语句处理器中访问原始的 DOM 事件。 多事件处理器 事件处理程序中可以有多个方法，这些方法由逗号运算符分隔： <template>
... 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。2.5K20发布于 2020-11-03来自专栏前端专栏JS事件流、事件冒泡、阻止冒泡、事件捕获（一看就懂）
讲 事件冒泡 、阻止冒泡 和 事件捕获 之前先说说什么是事件流，这样会更容易明白 一、事件和事件流 1、什么是事件 事件是可以被 JavaScript 侦测到的行为。 二、事件冒泡 看了上面的那张图应该对事件冒泡有了大概的了解了吧。总结来说就是： 当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window。 三、阻止冒泡 1、JS阻止事件冒泡 我们用 e.stopPropagation() 这个方法添加到某事件函数里的末尾，就可以做到阻止冒泡事件。 e = e || window.event; if(e.stopPropagation) { e.stopPropagation(); //W3C 2、JQ阻止事件冒泡 jq阻止事件冒泡就简单了，直接在事件函数里面添加 return false; 就行了。
21.8K64编辑于 2022-06-09来自专栏编程社区js 事件冒泡和事件捕获
事件冒泡： 事件冒泡由IE团队提出来的，即事件开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。 IE9，chrome，Firefox，Opera，Safari都支持事件冒泡，并将事件冒泡到window对象。 如下，点击obj3，依次弹出obj3、world、hello。 ('click', function () { alert('obj3'); })//依次弹出obj3、world、hello </script> </body> 阻止事件冒泡的方法 event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。 > </body> removeEventListener() 删除DOM2级事件处理程序，采用removeEventListener()，删除时传入的参数必须和绑定时传入的参数相同，不能传入匿名函数
3.8K30编辑于 2022-01-26来自专栏Creator星球游戏开发社区CreatorPrimer|触摸事件冒泡
在CCScrollView.js源码中搜“TOUCH_END”关键字，找到TOUCH事件注册的代码： ? 看看这里有与自己平时注册TOUCH事件有什么不同？ 相信你已经发现了，关键在最后一个参数：useCapture，用于是否捕获子节点事件，又称之为向下冒泡（默认是向上冒泡），下面以TOUC_END事件为例，简单说明一下： this.node.on( cc.Node.EventType.TOUCH_END , //触摸事件类型 this. _onTouchEnded, //事件处理函数 this, //事件处理函数的this上下文（使用箭头函数时通常被省略） h=%E5%86%92%E6%B3%A1 还有对应的官方范例：TouchPropagation ?
1.7K30发布于 2019-09-11来自专栏全栈程序员必看js事件防止冒泡
事件目标 如今。事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，可是没有被全部浏览器实现 。 停止事件传播 事件对象还提供了一个.stopPropagation()方法，该方法能够全然阻止事件冒泡。 以便訪问事件对象。然后。通过简单地调用event.stopPropagation()就能够避免其它全部DOM元素响应这个事件。这样一来，单击button的事件会被button处理。 并且仅仅会被button处理。 单击样式转换器的其它地方则能够折叠和扩展整个区域。 3. 事件传播和默认操作是相互独立的两套机制，在二者不论什么一方发生时，都能够终止还有一方。假设想要同一时候停止事件传播和默认操作，能够在事件处理程序中返回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来自专栏mySoul事件冒泡和传播
举栗子 事件输出hello world 事件有两种，一种为事件传播，一种是事件冒泡 事件传播和事件冒泡 这还要从遥远的荒诞说起，两家网景和ie，为了能争夺市场，互相使用相反的技术，当网景使用事件传播的时候 ，ie使用事件冒泡。 （两个正好相反）这个时候w3c来了，为了能规范规定，直接取折中，当事件发生时，先发生向下传播，当到底了以后再次使用事件冒泡，逐渐的冒泡到顶层window DOM为一个完整的树 使用事件传播输出hello 否则为事件传播 冒泡为上，事件传播为下，事件传播优于事件冒泡 [15.gif] 可以明确的知道，此时为false为冒泡，即全部向上传播，这个比较简单不在阐述 阻止进一步冒泡 // 获取元素 var div1 ，为向下，且传播优先于冒泡 并且事件先进行向上传，直到遇到设置为冒泡的元素的时候，停止向上传，开始进行从上到下的捕获，先最外层捕获，然后逐层捕获，直到完成。
1.2K60发布于 2018-08-13来自专栏前端架构与工程浅谈事件冒泡
前端开发中不可避免会接触到事件冒泡，今天简单记录一下处理事件冒泡的一点经验，谈不上心得，聊当抛砖引玉。 不谈移动端，以PC浏览器的click事件为例。 事件冒泡机制最初是由微软提出的，而事件捕捉机制是由NetScape提出的，这两种机制是完全不同的事件流处理机制，平常较多地被认为是事件冒泡的两种方式，其实是不严谨的。 捕捉事件流 NetScape提出的捕捉式事件流处理机制，跟冒泡事件流完全相反，是从最外层容器(也就是<body>)开始往里传递事件。 弹出窗口的顺序为3-2-1。 弹出窗口的顺序为1-2-3。 当然，平时被使用较广的是冒泡式的传递方式，但捕捉事件流也有其用武之地。IE9以上的浏览器也支持addEventListener()方法。
63090发布于 2018-01-30来自专栏软件工程师MichaelVue3事件处理
tips：Vue3中事件可以用括号，也可以不用括号，不加括号表示单个事件如果要用多时间，就要用逗号隔开，并且要加括号事件带括号可以传参，参数可以包含Vue对象里面的属性 example:<! name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/vue@<em>3</em>"
51810编辑于 2022-09-12来自专栏ops技术分享Vue3 事件处理
语法格式： v-on:click="methodName" 或 @click="methodName" 事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault .stop - 阻止冒泡 .prevent - 阻止默认事件 .capture - 阻止捕获 .self - 只监听触发该元素的事件 .once - 只触发一次 .left - 左键事件 .right - 右键事件 .middle - 中间滚轮事件 <! -- 阻止单击事件冒泡 --> <! -- 添加事件侦听器时使用事件捕获模式 -->
...<!1.9K10发布于 2021-07-28Vue3 事件处理
> <script> const app = { data() { }, methods: { one(event) { alert("第一个事件处理器逻辑...") }, two(event) { alert("第二个事件处理器逻辑...") } } } Vue.createApp(app).mount('#app') </script> 事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation() .stop - 阻止冒泡 .prevent - 阻止默认事件 .capture - 阻止捕获 .self - 只监听触发该元素的事件 .once - 只触发一次 .left - 左键事件 .right -- 阻止单击事件冒泡 --> <!
23010编辑于 2025-12-16
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号