JavaScript 阻止冒泡与默认行为最佳实践

本文的风格是「问题导向」：先抛出使用阻止冒泡与默认行为时的典型问题，再逐个解答。如果你对这些问题似曾相识，那就对了。

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

关于阻止冒泡与默认行为，本文只讲三件事：它是什么、怎么用、有哪些坑。把这三件事搞清楚，日常开发就足够用了。

阻止冒泡与默认行为实战要点拆解

1. 保持阻止冒泡与默认行为相关代码的简洁，能用三行写清楚就不要写十行。
2. 先理解阻止冒泡与默认行为的基本概念和适用场景，再动手写代码，避免边写边猜。
3. 养成查阅官方文档的习惯，第三方教程里的阻止冒泡与默认行为用法可能已经过时。

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

写一段阻止冒泡与默认行为的代码

这里以阻止冒泡与默认行为作为演示：

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

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

几个需要留意的细节

1. 关键操作加二次确认，手滑的代价有时候承受不起。
2. 时间相关的功能要考虑时区和夏令时，跨国项目尤其如此。
3. 遇到并发问题先怀疑共享状态，全局变量是重灾区。

收尾

技术的学习贵在坚持。今天花十分钟搞懂阻止冒泡与默认行为，日积月累，就是别人追不上的差距。

---

遇见问题加 QQ23979811 协助处理