JS中stopPropagation与preventDefault的区别是什么

图 0：stopPropagation 与 preventDefault 的核心定位对比概览

一、核心差异速查矩阵

为了让读者对两者的职责分工建立清晰的第一印象，下表提炼了它们在调用目的、生效对象、关联状态以及典型应用场景上的核心差异：

二、底层机制：DOM 事件流与两条平行控制管线

很多初学者容易将两者混淆，根源在于不清楚“事件传递”与“默认行为”在浏览器底层属于两条相互独立的流水线。W3C 标准将一个完整的 DOM 事件生命周期划分为三个阶段：捕获阶段（从 window 一路向下到达目标节点）、处于目标阶段（在目标节点触发监听器）以及冒泡阶段（从目标节点向上传播回 window）。

在此过程中，事件监听器的触发（Event Listeners）构成了“事件传播链”，而浏览器的原生动作（如点击 <a> 标签触发的页面导航）则是在目标处理完毕或冒泡结束后执行的“默认行为管线”。

图 1：DOM 事件传播阶段与两大拦截 API 的作用点全景图

从图 1 可以直观看出：

• stopPropagation() 作用在垂直的 DOM 节点传播链上。一旦在某个节点调用该方法，事件向上的冒泡（或向下的捕获）通道就会被硬性切断，位于上游的祖先节点再也收不到该事件通知。
• preventDefault() 作用在独立的“默认动作执行器”上。它向事件对象打上一个标记（将 event.defaultPrevented 设为 true），通知浏览器在事件周期结束后不要执行系统默认动作，但它绝对不会切断向上的冒泡通道。

三、stopPropagation 详解：控制事件传播范围

在界面开发中，DOM 节点往往是层层嵌套的。当子元素触发事件时，按照默认的冒泡机制，父级元素绑定的同类事件也会随之触发。如果不加以约束，容易造成意料之外的 UI 交互冲突。

图 2：stopPropagation 阻断机制与同元素多监听器执行对比

1. 典型应用案例：模态框遮罩点击关闭

最经典的场景是模态弹窗（Modal）。通常我们希望点击半透明的背景遮罩层时关闭弹窗，而点击弹窗内部的内容卡片时不触发关闭：

// 遮罩层：点击关闭弹窗
const backdrop = document.querySelector('#modalBackdrop');
backdrop.addEventListener('click', function(e) {
  console.log('点击了遮罩层，关闭模态框');
  closeModal();
});

// 弹窗卡片：阻止点击事件冒泡到遮罩层
const dialogCard = document.querySelector('#dialogCard');
dialogCard.addEventListener('click', function(e) {
  e.stopPropagation();
  console.log('点击了弹窗内部卡片，阻止向上冒泡，遮罩层不会收到点击');
});

如果不在 #dialogCard 的点击回调中加入 e.stopPropagation()，那么用户在弹窗内点击任何输入框、按钮或空白处，事件都会沿 DOM 树冒泡到 #modalBackdrop，导致弹窗被立刻意外关闭。

2. 进阶对比：stopPropagation 与 stopImmediatePropagation

如果同一个 DOM 元素上通过 addEventListener 绑定了多个同名事件处理函数，e.stopPropagation() 只会阻止该事件冒泡到父级，但同一个元素上后续排队的其他监听函数依然会被执行。

若希望在执行当前函数后，不仅阻断冒泡，还立即阻断该节点上后续所有同名监听器的执行，则需要使用 e.stopImmediatePropagation()：

const btn = document.querySelector('#actionBtn');

btn.addEventListener('click', function(e) {
  console.log('监听器 1 执行');
  e.stopImmediatePropagation(); // 阻止冒泡，并阻止后续监听器
});

btn.addEventListener('click', function(e) {
  console.log('监听器 2 不会被执行！');
});

四、preventDefault 详解：接管原生交互

浏览器中的许多 HTML 元素自带原生交互功能。例如点击 <a href="..."> 链接会跳转到目标 URL；点击表单内的 <button type="submit"> 或按下回车会导致表单提交并刷新页面；右键点击网页会弹出系统快捷菜单等。当我们需要用前端 JavaScript 自定义这些行为时，就必须调用 preventDefault()。

图 3：preventDefault 验证、执行与避坑排查四步流程

1. 典型应用案例：AJAX 异步表单提交

在前后端分离项目中，表单通常通过 fetch 或 axios 进行异步提交，不需要浏览器刷新整个页面：

const loginForm = document.querySelector('#loginForm');

loginForm.addEventListener('submit', function(e) {
  // 必须阻止默认的表单 HTTP 提交刷新页面行为
  e.preventDefault();

  const formData = new FormData(this);
  console.log('默认提交被阻止，改由 fetch 异步发送数据...');
  
  fetch('/api/login', {
    method: 'POST',
    body: formData
  }).then(res => res.json()).then(data => {
    console.log('登录成功', data);
  });
});

2. 调用前后的必要检查与易错点

• 检查 event.cancelable：并非所有事件都可以被取消。只有当 e.cancelable === true 时，调用 e.preventDefault() 才能发挥作用。例如大部分 UI 滚动事件中的某些原生派生事件可能不可取消。
• 警惕 Passive 监听器：现代移动浏览器为了提升页面滑动流畅度，对 touchstart、touchmove、wheel 等滚动相关事件默认启用了 { passive: true }。在被动监听器内调用 e.preventDefault() 不仅无法阻止滑动，还会触发浏览器的控制台报错。若确实需要拦截滚动，必须在绑定时显式传入 { passive: false }：

  window.addEventListener('touchmove', function(e) {
    e.preventDefault(); // 显式声明 passive: false 后方可生效
  }, { passive: false });

• 利用 event.defaultPrevented 属性：在后续流程或其他处理函数中，可以通过读取只读属性 e.defaultPrevented（布尔值）来判断先前的处理者是否已经取消了默认行为。

五、两者同时使用的场景与常见误区

1. 什么时候需要同时调用两者？

假设我们正在开发一个任务列表卡片，整个卡片绑定了点击展开详情的事件；而在卡片内部，有一个“下载报告”的超链接 <a href="...">，我们希望点击该链接时触发异步下载，既不触发网页跳转，也不让卡片展开详情：

const reportLink = document.querySelector('#reportLink');

reportLink.addEventListener('click', function(e) {
  // 1. 阻止 <a> 标签原生跳转行为
  e.preventDefault();

  // 2. 阻止事件冒泡到外层卡片容器，防止卡片意外展开
  e.stopPropagation();

  // 3. 执行纯前端自定义下载逻辑
  triggerCustomAsyncDownload();
});

在这个场景中，如果只调用 preventDefault()，链接虽然不跳转了，但点击事件依然会冒泡给卡片，导致卡片展开；如果只调用 stopPropagation()，卡片虽然不会展开，但浏览器依然会按 href 导航跳转。因此，只有两者同时调用才能达到目标。

2. 历史陷阱：jQuery 中的 return false 与原生 JS 的差异

六、选型决策指南与总结

在面对具体的事件异常时，开发者可以根据以下决策树快速确定应该调用哪个 API：

图 4：stopPropagation 与 preventDefault 的选型决策树与技术对照