event.stopPropagation()用于阻止事件向上冒泡，不影响同元素其他监听器或默认行为；常见于弹窗关闭按钮、菜单内选项等需避免触发父级逻辑的场景。
event.stopPropagation() 用来阻止事件在 DOM 树中向上冒泡（即停止向父元素传播），但不会影响同一元素上其他监听器的执行，也不会阻止事件的默认行为。
什么时候需要 stopPropagation
常见于“点击子元素时，不希望触发父容器的点击逻辑”。比如弹出菜单里的按钮、模态框内的关闭按钮、下拉列表中的选项等。
- 父级有
click监听器用于隐藏菜单，但点击菜单内部按钮时不该关闭它 - 表格单元格内有复选框，点击复选框不应触发整行的选中逻辑
- 自定义下拉组件中，点击选项后不希望关闭下拉框以外的其他逻辑被触发
基本用法示例
直接在事件处理函数中调用：
document.getElementById('child').addEventListener('click', function(e) {
e.stopPropagation(); // 阻止事件冒泡到父级
console.log('子元素被点击');
});
document.getElementById('parent').addEventListener('click', function() {
console.log('父元素被点击'); // 这行不会执行（当点击 child 时）
});
注意和 stopImmediatePropagation 的区别
stopPropagation 只阻止冒泡，不影响当前元素上其他监听器运行；stopImmediatePropagation 还会阻止同一元素上**后续绑定的监听器**执行。
- 如果一个元素绑了两个
click监听器，只调stopPropagation：两个都会执行 - 如果调
stopImmediatePropagation：第二个监听器不会执行 - 两者都不影响
e.preventDefault()—— 那是专门管默认行为的
实际开发中的小提醒
不要滥用 stopPropagation，尤其在封装组件时，过度拦截可能让外部无法监听事件。更推荐的做法是：
- 用事件委托 +
e.target判断来源，而不是依赖冒泡 - 给关键子元素加
data-stop-bubble="true"类或属性，统一拦截 - 在业务逻辑里提前 return，比强拦事件传播更清晰
