stopPropagation()用于阻止事件冒泡，需在子元素事件处理函数中调用；它只阻断传播路径，不影响默认行为，与preventDefault()功能不同。
用 stopPropagation() 阻止事件冒泡，核心是在子元素的事件处理函数中调用它，让事件不再向父级 DOM 逐层上传。这能有效避免点击子元素时意外触发父级绑定的同类型事件（比如 click）。
什么时候必须用 stopPropagation
常见于以下场景：
- 弹出菜单（如下拉框、右键菜单）内部有按钮，点击按钮不希望关闭菜单
- 表格行（
<tr>）绑了点击跳转，但行内「删除」图标点击应只执行删除，不触发整行跳转 - 模态框（Modal）中点击内容区不关闭，但点击遮罩层（父级）才关闭
基本写法：在子元素事件中调用
注意：必须在事件处理函数内部调用，且通常放在逻辑开头或关键判断之后：
JavaScript 示例：document.querySelector('.child-btn').addEventListener('click', function (e) {
e.stopPropagation(); // ✅ 关键：阻止事件继续向上冒泡
console.log('只执行子按钮逻辑');
});
此时即使它的父元素（比如 .parent）也监听了 click，也不会被触发。
和 preventDefault 的区别别搞混
stopPropagation() 只影响事件传播路径（不往上走），不影响默认行为；preventDefault() 只取消默认动作（如链接跳转、表单提交），不阻止冒泡。
例如点击一个 <a href="/home">：
- 只调
e.stopPropagation()→ 页面仍会跳转，但父级 click 不触发 - 只调
e.preventDefault()→ 页面不跳转，但父级 click 仍会执行 - 两个都调 → 既不跳转，也不触发父级
替代方案：事件委托 + 条件过滤
如果父级用事件委托监听（比如 parent.addEventListener('click', handler)），也可在 handler 中判断目标来源，避免执行无关逻辑：
parent.addEventListener('click', function (e) {
if (e.target.classList.contains('child-btn')) {
// 是子按钮被点，直接 return 或做专门处理
return;
}
// 其他情况才执行父级逻辑
});
这种方式更灵活，适合动态增删子元素的场景，但不如 stopPropagation 直观可控。
