stopPropagation用于阻止事件冒泡但不影响当前元素其他监听器及捕获阶段；常见于弹出层关闭按钮、列表项内图标与文字独立响应、自定义右键菜单等场景，需配合preventDefault使用。
stopPropagation 用于阻止事件继续向父元素冒泡，但它不影响当前元素上其他监听器的执行，也不阻止事件捕获阶段的传递。
点击子元素时避免触发父容器的点击逻辑
常见于弹出层、下拉菜单、模态框等场景：子元素（如关闭按钮）点击后，不希望同时触发外层遮罩或容器的隐藏行为。
- 给关闭按钮绑定 click 事件，在回调中调用 e.stopPropagation()
- 确保父级（如遮罩层）的点击事件监听器在冒泡阶段执行（默认就是），否则需检查是否用了 capture: true
- 注意：如果父级监听的是捕获阶段，stopPropagation 同样会阻止它，但通常父级监听的是冒泡阶段
表单内多个可交互区域需要独立响应
例如一个带删除图标和编辑文字的列表项：删除图标点击应只删条目，文字区域点击应进入编辑，但两者都在同一个 li 内。
- 为删除图标单独绑定事件，并在其中调用 stopPropagation，防止事件冒泡到 li 触发编辑逻辑
- li 元素自身监听 click 用于编辑，由于事件被图标拦截，不会误触发
- 避免仅靠 event.target 判断类型，因为 DOM 结构变化容易出错；显式拦截更可靠
自定义右键菜单中屏蔽浏览器默认上下文菜单
实现右键弹出自定义菜单时，需阻止默认菜单出现，同时防止事件冒泡干扰其他逻辑。
立即学习“Java免费学习笔记（深入）”；
- 在目标元素上监听 contextmenu 事件，调用 e.preventDefault() 屏蔽默认菜单
- 紧接着调用 e.stopPropagation()，避免 contextmenu 冒泡到 body 或 document 导致意外行为
- 如果全局监听了 document 的 contextmenu 来隐藏自定义菜单，冒泡未被阻止会导致菜单闪一下就消失
