stopPropagation()仅阻断DOM事件传播路径，不影响默认行为，需配合target定位、preventDefault()及结构优化才能根治嵌套UI事件干扰。
用 event.stopPropagation() 治理嵌套 UI 的事件干扰，关键不在“一加了事”，而在于**理解它能做什么、不能做什么，并配合触发目标定位与逻辑边界判断**。盲目在父级 click 监听器里加 stopPropagation()，常导致子组件（如 Nice-Select、自定义弹窗、拖拽项）失灵——这不是方法错了，是用错了地方。
明确 stopPropagation() 的真实作用域
它只做一件事：切断当前事件在 DOM 树中的传播路径（冒泡或捕获），不影响默认行为，也不影响事件是否被触发。比如：
- 点击一个
<a href="/home">首页</a>，调用e.stopPropagation()后，链接依然会跳转； - 点击一个
draggable="true"的 div，调用e.stopPropagation()后，拖拽阴影和光标变化照常出现； - 点击 Nice-Select 渲染出的下拉箭头，父菜单若在容器上监听 click 并 stopPropagation()，会直接掐断 Nice-Select 内部对 mousedown 的响应链，导致点不动。
优先改造触发结构，而非强塞 stopPropagation()
与其在父容器上“堵”，不如把开关动作精准落到可交互子元素上。例如：
- 把下拉菜单的展开/收起绑定到
<button class="menu-toggle">，而不是整个<div class="dropdown">； - “点击外部关闭”逻辑改用
e.target.closest('.dropdown')判断，只在真正点到非 dropdown 区域时才关闭； - 这样，Nice-Select、内部表单控件、按钮等都能完整接收原生事件，无需额外干预。
动态生成内容？用 class 主动过滤更可靠
对于弹窗、动态下拉、模态框等场景，仅靠 stopPropagation() 容易漏控（比如新插入的节点没绑定监听）。推荐结合 class 做主动识别：
- 监听 document 级 click；
- 用
e.target.closest('.popup')或e.target.closest('.select-wrapper')判断点击是否落在目标组件内； - 只有当
!e.target.closest('.popup')且不是遮罩层本身时，才执行关闭逻辑。
特殊交互需搭配 preventDefault() 才完整
遇到拖拽、右键菜单、链接跳转等含默认行为的场景，stopPropagation() 往往只是半步：
- 想禁用子元素拖拽？必须在它的
dragstart中调e.preventDefault()； - 点击按钮不想触发外层 Link 跳转？
e.stopPropagation()阻冒泡 +e.preventDefault()阻跳转，二者缺一不可； - Vue 用户可直接用
@click.stop.prevent修饰符一步到位。
不复杂但容易忽略：stopPropagation() 是手术刀，不是胶带。用对位置、配对逻辑、区分行为，嵌套 UI 的事件干扰自然消解。
