event.stopPropagation()用于阻止事件向上冒泡，只切断向父元素传播路径，不影响默认行为或同级监听器；须在事件回调函数内调用，不可在HTML属性中使用，且需确保绑定时机正确、阶段匹配。
event.stopPropagation() 在 HTML 事件监听中怎么用
直接在事件处理函数里调用 event.stopPropagation()，就能阻止当前事件继续向父元素冒泡。它不取消默认行为，也不影响同一级的其他监听器执行，只切断「向上」路径。
常见错误是把它和 event.preventDefault() 混用——后者管的是表单提交、链接跳转这类默认动作，跟冒泡无关；还有人写成 stopPropagation 拼错或漏掉括号，结果完全没效果。
- 必须在事件回调函数内部调用，不能在 HTML 属性里写（比如
onclick="event.stopPropagation()"会报ReferenceError: event is not defined） - 推荐用
addEventListener绑定，确保能拿到event参数：button.addEventListener('click', function(e) { e.stopPropagation(); console.log('点击了按钮，但不会触发父 div 的 click'); }); - 如果用箭头函数，注意
this绑定问题，但e参数本身不受影响
stopPropagation 和 stopImmediatePropagation 有什么区别
event.stopPropagation() 只阻止冒泡，同级其他监听器仍会执行；event.stopImmediatePropagation() 更狠：既阻止冒泡，也阻止当前元素上**后续注册的监听器**运行。
比如一个按钮绑了两个 click 监听器，第二个调用了 stopImmediatePropagation()，那第三个哪怕还没执行，也直接跳过。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 场景差异：需要“只让第一个处理逻辑生效”时才用
stopImmediatePropagation()，日常防冒泡用stopPropagation()就够 - 兼容性没问题，IE9+ 都支持这两个方法
- 注意：一旦调用了
stopImmediatePropagation()，连同级的stopPropagation()也自动生效，不用重复写
为什么加了 stopPropagation 还是触发了父级事件
最常见原因是事件没绑定到目标元素上，或者绑定时机不对——比如 DOM 还没加载完就去绑事件，导致监听器根本没挂上。
另一个隐蔽坑是：父元素监听的是捕获阶段（useCapture = true），而 stopPropagation() 默认只影响冒泡阶段。捕获阶段的事件在到达目标前就已触发，此时调用它已经晚了。
- 检查是否用了
addEventListener('click', handler, true)—— 如果是，要么把父级改成冒泡阶段监听，要么在目标元素里也用捕获阶段并提前调用stopPropagation() - 用浏览器开发者工具的 Elements → Event Listeners 面板确认事件是否真实绑定成功
- 动态插入的元素（如 AJAX 加载后追加的按钮），需用事件委托或确保在插入后再绑定
React/Vue 里怎么等效实现 stopPropagation
框架里不能直接写原生 event.stopPropagation() 吗？可以，但得注意写法。React 的合成事件对象也支持这个方法，Vue 的 @click.stop 是语法糖，底层也是调用它。
- React 中：在 JSX 回调里调用
e.stopPropagation()，不要写成e.nativeEvent.stopPropagation()—— 合成事件已封装好，直接用就行 - Vue 中：
@click.stop最简洁；手动调用的话，在方法里写event.stopPropagation()即可，event会自动注入 - 注意：React 的
onClick是冒泡阶段触发，所以stopPropagation()有效；但自定义事件（如onMouseDown）若被父组件拦截，逻辑要更小心
