JavaScript 阻止冒泡与默认行为实战详解

这是一篇关于阻止冒泡与默认行为的实战笔记。内容来自真实项目中的使用经验，不求面面俱到，但求每一点都能用得上。

从一个真实场景说起：阻止冒泡与默认行为

很多开发者对阻止冒泡与默认行为的印象停留在「会用就行」，直到线上出了问题才发现理解得并不透彻。本文从实际使用出发，聊聊阻止冒泡与默认行为中那些容易被忽略的地方。

吃透阻止冒泡与默认行为：核心概念梳理

1. 遇到阻止冒泡与默认行为不生效的情况，先确认版本和环境，再怀疑代码。
2. 用阻止冒泡与默认行为处理并发场景时要格外小心，确认它是否线程安全。
3. 阻止冒泡与默认行为在循环中使用时要留意重复开销，能提到循环外的就提出来。

接下来用代码实际演示一下阻止冒泡与默认行为。

阻止冒泡与默认行为实战代码

实践一下，阻止冒泡与默认行为：

document.querySelector('.inner').addEventListener('click', (e) => {
  e.stopPropagation();   // 阻止冒泡到父元素
  console.log('只触发内层');
});

document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();    // 阻止表单默认跳转
  // 用 fetch 自行提交
});

实践中的注意事项

• 写完代码自己先过一遍，很多低级错误在自审时就能发现。
• 文档和代码要同步更新，过期文档比没有文档更害人。
• 批量操作前先小批量试跑，确认无误再全量执行。
• 接口返回的数据结构要和文档核对，字段名大小写都可能踩坑。

总结

本文没有覆盖阻止冒泡与默认行为的所有细节，但已经把最高频、最易错的部分讲清楚了。剩下的细节，实践中自然会遇到并掌握。

---

遇见问题加 QQ23979811 协助处理