事件冒泡是DOM事件从触发元素逐层向上传递到document的默认机制，防止它的核心手段是调用event.stopPropagation()，但在vue、react等框架里还有更简洁的框架级写法。
事件冒泡到底是怎么发生的
想要理解怎么阻止,先得知道冒泡是怎么回事，想象一个嵌套结构：body里面有一个div，div里面有一个按钮，你点击按钮时，浏览器会先触发按钮上的事件，然后依次触发div、body、html、document上的同类事件，这个过程就像快递员从你家出发，逐层往上汇报，每一层都会收到这个包裹。
一个最简单的冒泡例子
<div id="parent" onclick="alert('父级触发')">
<button id="child" onclick="alert('子级触发')">点我</button>
</div>
点击按钮,浏览器会先弹出“子级触发”，再弹出“父级触发”，这就是冒泡：事件从目标元素向上传播，业内专家指出，理解这个机制是掌握事件委托的前置条件，而事件委托恰恰是利用冒泡来实现的常见优化手段，据统计，相当一部分前端面试题，都会围绕这两个概念展开考察。
js阻止事件冒泡方法有哪些
这是绝大多数前端开发者最早接触的问题,js层面阻止冒泡的方法主要有三种，适用场景各不相同。
stopPropagation和preventDefault区别
这两个API经常被混为一谈,但职责完全不同。stopPropagation()切断事件传播路径，事件不会再往上冒泡；preventDefault()取消浏览器默认行为，比如阻止a标签跳转、阻止表单提交，但事件仍然会继续冒泡。
| 方法 | 阻止冒泡 | 阻止默认行为 | 适用场景 |
|---|---|---|---|
| stopPropagation() | 是 | 否 | 子元素点击不想触发父元素 |
| preventDefault() | 否 | 是 | 阻止表单提交、链接跳转 |
| stopImmediatePropagation() | 是 | 否 | 阻止冒泡且阻止同元素后续监听器 |
| return false（jQuery中） | 是 | 是 | jQuery事件处理中同时阻止两者 |
return false在不同环境下的表现
原生DOM事件中,return false不会阻止冒泡，也不会阻止默认行为，但在jQuery的事件处理函数里，return false相当于同时调用了stopPropagation()和preventDefault()，这种差异容易踩坑，建议在原生js中明确使用stopPropagation()。
stopImmediatePropagation的使用时机
如果同一个元素上绑定了多个点击监听器,stopPropagation()只能阻止冒泡，但同元素上的其他监听器依然会执行，stopImmediatePropagation()则更彻底，它连当前元素上的后续监听器也一并拦下，当一个按钮绑定了统计埋点和业务逻辑，出现冲突时，这个API就派上了用场。
vue防止事件冒泡的常见写法
在vue项目里,大部分人不会直接操作event对象，vue提供了一系列事件修饰符，用点号拼在事件后面即可。
@click.stop修饰符
<div @click="handleParent"> <button @click.stop="handleChild">点击</button> </div>
加上.stop之后，点击按钮只会触发handleChild，handleParent不会执行，这是vue中最常用的防冒泡写法，代码量最少，语义最清晰。
vue3中的变化
vue3保留了事件修饰符机制,.stop、.self、.capture等依然有效，区别在于，vue3的事件绑定底层不再使用原生事件监听，而是通过虚拟DOM的patch阶段处理，但冒泡的语义和阻止方式没有变化。.self修饰符也值得留意，它只在事件目标是当前元素自身时才触发，天然规避了一部分冒泡场景。
react合成事件冒泡处理的特殊之处
react17之前,所有合成事件都挂在document上，react17之后改挂到根容器上，这意味着react的合成事件冒泡和原生事件冒泡是两套体系，在react组件里调用e.stopPropagation()，只能阻止react合成事件的冒泡，原生事件监听器的执行，它管不到。
实际场景中的处理策略
如果页面里混用了原生事件和react合成事件,情况会更复杂，比如在useEffect里给document绑定了原生click监听，react组件里调用e.stopPropagation()，拦不住这个原生监听器，行业共识认为，这种情况下最稳妥的做法，是在原生事件监听器里判断事件来源，或者用e.nativeEvent.stopImmediatePropagation()从原生层面切断。
事件冒泡和事件捕获区别
冒泡和捕获是事件传播的两个方向,捕获阶段从window开始，一路向下到目标元素；冒泡阶段从目标元素一路向上回window，addEventListener的第三个参数传true表示在捕获阶段触发，默认false表示在冒泡阶段触发。
element.addEventListener('click', handler, true); // 捕获阶段
element.addEventListener('click', handler, false); // 冒泡阶段
大多数业务场景关注的是冒泡阶段,但父元素想在子元素之前收到事件时，捕获阶段就很有用，比如全局点击埋点，用捕获阶段可以更早拿到点击信息，避免被子元素的stopPropagation拦截。
常见业务场景：列表项点击与删除按钮冲突
一个典型场景：列表中的每一项都有点击跳转详情，但每项右侧还有一个删除按钮，点击删除按钮时，如果不阻止冒泡，删除按钮的click会冒泡到列表项上，导致跳转详情和删除同时触发。
<ul id="list">
<li data-id="1" onclick="goDetail(1)">
列表项内容
<button onclick="deleteItem(1, event)">删除</button>
</li>
</ul>
在deleteItem里调用event.stopPropagation()，就能让删除按钮的事件停在自己这一层，不再干扰列表项的点击逻辑，如果用事件委托，把click统一挂在ul上，则需要通过event.target判断点击的到底是li还是button，配合closest()方法做精确匹配。
防止事件冒泡,本质是切断事件传播路径，原生js用stopPropagation，vue用.stop修饰符，react留意合成事件边界，掌握这些差异，绝大多数冒泡问题都能快速定位。
Q&A：防止事件冒泡的常见疑问
stopPropagation和preventDefault到底有什么区别
stopPropagation只影响事件传播路径,preventDefault只影响浏览器默认行为，一个表单提交按钮，调用preventDefault后表单不会提交，但click事件依然会冒泡到父元素；调用stopPropagation后事件不再向上传播，但表单该提交还是提交，两者互不干扰，实际开发中经常需要同时使用。
vue中@click.stop和@click.prevent可以链式使用吗
可以。@click.stop.prevent会先调用stopPropagation，再调用preventDefault，两个动作按点号顺序依次生效，如果只需要其中一个，单独写就行，修饰符的顺序不影响最终结果，因为vue内部会依次调用对应的方法。
react中阻止事件冒泡为什么有时候不生效
原因通常是react合成事件和原生事件的监听器不在同一个层级,react17之后合成事件挂在根容器上，原生事件监听器如果挂在document上，事件会先到达document的原生监听器，再进入react的合成事件系统，此时react里的e.stopPropagation()，已经无法阻挡document层级的原生监听器，需要在原生监听器层面做判断，或者使用e.nativeEvent.stopImmediatePropagation()，在原生事件对象上直接切断传播。
首发原创文章，作者：王坚，如若转载，请注明出处：https://test.idctop.com/article/555473.html
