阻止事件冒泡需调用stopPropagation()方法，仅中断冒泡阶段传递；常用于嵌套元素独立处理事件，如按钮点击不触发父卡片、下拉菜单选项不关闭容器等；须在事件处理函数中通过参数获取事件对象调用，注意框架兼容性及与return false的区别。
阻止事件冒泡，核心是调用事件对象的 stopPropagation() 方法。它能中断当前事件向父元素逐层向上传递的过程，只影响冒泡阶段，不影响捕获阶段。
什么时候需要阻止冒泡？
常见于嵌套元素有各自事件处理逻辑时，比如：
- 点击一个按钮（子元素），但不希望同时触发其外层卡片（父元素）的点击事件
- 下拉菜单内点击选项，避免关闭整个菜单容器
- 模态框内的表单提交，防止误触背景遮罩层的关闭逻辑
如何正确调用 stopPropagation()？
必须在事件处理函数中，通过参数拿到事件对象再调用：
element.addEventListener('click', function(e) {
e.stopPropagation();
// 其他业务逻辑
});
注意：
- 箭头函数中无法用
e直接访问原生事件对象（需确保监听器是普通函数或显式传参） - Vue/React 等框架中，事件对象是封装过的，但通常仍支持
.stopPropagation()，也可用修饰符如@click.stop - IE8 及更早版本用
e.cancelBubble = true兼容（现代项目一般无需考虑）
stopPropagation() 和 return false 的区别
别混淆两者作用：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- stopPropagation()：只阻止事件继续向上冒泡，不影响默认行为（如链接跳转、表单提交）
-
return false：在 jQuery 中等价于同时调用
stopPropagation()+preventDefault()；在原生 DOM 事件里，return false并不会阻止冒泡，仅在某些场景（如 inline handler）中隐式调用preventDefault()
e.preventDefault()，需要阻止冒泡就用 e.stopPropagation()。
其他相关方法：stopImmediatePropagation()
如果一个元素绑定了多个同类型事件监听器，stopImmediatePropagation() 不仅阻止冒泡，还会立即终止当前元素上**后续监听器的执行**：
立即学习“Java免费学习笔记（深入）”；
btn.addEventListener('click', () => console.log('first'));
btn.addEventListener('click', (e) => {
e.stopImmediatePropagation();
console.log('second'); // 不会执行
});
btn.addEventListener('click', () => console.log('third')); // 也不会执行
