stoppropagation必须在事件处理函数中调用，因html内联属性不自动传入事件对象；捕获阶段监听需对应捕获绑定并提前调用；react中return false无效，须显式调e.stoppropagation()；动态元素需委托或确保绑定时机。
为什么 stopPropagation 必须在事件处理函数里调用，不能写在 HTML 属性中
直接在 onclick 属性里写 e.stopPropagation() 会报 ReferenceError: e is not defined，因为 HTML 内联事件处理器不自动注入事件对象。浏览器不会把 e 当作隐式参数传进去。
常见错误写法：onclick="e.stopPropagation()" 或 onclick="event.stopPropagation()" —— 都无效。
正确做法只有两种：
- 用
addEventListener绑定，并显式声明事件参数（如(e) => { e.stopPropagation(); }） - 在内联属性中手动传参：
onclick="handleClick(event)"，再在 JS 里定义function handleClick(e) { e.stopPropagation(); }
后者虽可行，但破坏了逻辑分离，调试和复用都困难，不推荐用于编辑类交互场景。
编辑控件点击时父容器仍触发关闭，多半是捕获阶段监听惹的祸
如果你给弹窗遮罩层（.modal-overlay）用了 addEventListener('click', handler, true)，那它是在捕获阶段监听的。而 e.stopPropagation() 默认只阻断冒泡阶段，对捕获阶段「到达目标前」的传播无能为力。
结果就是：你点编辑按钮，事件先经过遮罩层（捕获）、再到按钮（目标）、再往上冒泡——但遮罩层早在第一步就执行了关闭逻辑。
解决方法只有两个：
- 把父级监听改成冒泡阶段（删掉第三个参数
true，或显式写false） - 在子元素监听器中也用捕获阶段绑定，并在第一行就调
e.stopPropagation()：button.addEventListener('click', handler, true)
别指望靠一个 e.stopPropagation() 同时拦住捕获和冒泡——它做不到。
React 中 onClick 里写 return false 完全没用
React 的合成事件系统里，return false 不会阻止冒泡，也不会取消默认行为。它只是让回调函数返回 false，仅此而已。
必须显式调用 e.stopPropagation()，且确保 e 是真实传入的参数：
- ✅ 正确：
onClick={(e) => { e.stopPropagation(); editField(); }} - ❌ 错误：
onClick={editField}（拿不到e） - ❌ 错误：
onClick={() => e.stopPropagation()}（e未定义）
另外注意：React 合成事件对象会被池化回收，但 stopPropagation() 调用本身不受影响，无需 e.persist()。
动态插入的编辑按钮 click 后仍触发父级跳转，大概率是事件没绑上
表格行内新增「编辑」图标、富文本工具栏动态渲染按钮……这些元素如果在 DOM 加载完之后才插入，而你又在 DOMContentLoaded 之前就执行了 querySelector().addEventListener()，那绑定根本没生效。
验证方式：打开开发者工具 → Elements 面板 → 右键目标按钮 → “Break on” → “attribute modifications”，或直接看右侧 “Event Listeners” 是否有 click 条目。
稳妥做法是：
- 用事件委托（比如监听表格父容器，用
e.target.matches('.edit-btn')判断） - 或确保绑定时机：用
document.addEventListener('DOMContentLoaded', ...)，或等框架的useEffect/mounted钩子执行后绑定
stopPropagation 不是魔法开关；它只在你真正绑到那个元素、且那个元素真被点击时才起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
