JavaScript Academy · 课时

preventDefault 与 stopPropagation

Q: 「preventDefault 与 stopPropagation」这节课中我会学到什么？

控制默认行为和冒泡。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

控制默认行为和冒泡。

preventDefault 与 stopPropagation 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

控制事件行为

您可以通过两种机制控制事件：停止浏览器的默认操作，以及阻止事件在 DOM 中继续传播。

默认操作

许多元素都有内置的默认行为：链接会跳转，提交表单会重新加载页面，复选框会切换状态。除非您进行干预，否则这些行为都会发生。

preventDefault

event.preventDefault 会取消浏览器的默认操作，同时仍允许您的处理函数运行。

link.addEventListener("click", (e) => {
  e.preventDefault(); // stop navigation
  console.log("handled in JS");
});

表单中的 preventDefault

一个常见用途是阻止表单重新加载页面，以便您使用 JavaScript 处理提交。

form.addEventListener("submit", (e) => {
  e.preventDefault();
  // send data via fetch instead
});

事件传播

事件到达目标后，会沿祖先元素向上冒泡，触发这些元素上的监听器。这就是点击子元素会触发父元素处理函数的原因。

stopPropagation

event.stopPropagation 会阻止事件继续传播到祖先元素。当前处理函数仍会执行完毕。

child.addEventListener("click", (e) => {
  e.stopPropagation(); // parent listeners will not fire
});

preventDefault 与 stopPropagation

二者彼此独立。preventDefault 会取消浏览器操作；stopPropagation 会阻止事件传播到其他元素。您可以只使用其中一个、同时使用二者，或者都不使用。

e.preventDefault();   // no default action
e.stopPropagation();  // no bubbling

同一元素上的其他监听器

stopPropagation 并NOT会阻止同一元素上的其他监听器运行。它们仍会触发。

el.addEventListener("click", (e) => e.stopPropagation());
el.addEventListener("click", () => console.log("still runs"));

stopImmediatePropagation

stopImmediatePropagation 的作用更进一步：它不仅会停止冒泡，还会阻止同一元素上所有尚未运行的监听器。

el.addEventListener("click", (e) => e.stopImmediatePropagation());
el.addEventListener("click", () => console.log("does NOT run"));

defaultPrevented

您可以检查 event.defaultPrevented，查看之前的处理函数是否已经调用过 preventDefault。

el.addEventListener("click", (e) => {
  console.log(e.defaultPrevented);
});

谨慎使用

停止传播可能会破坏页面其他位置的事件委托。只有在确实必要时才使用它，并考虑不会影响事件委托的替代方案。

快速检查

请选择正确的方法。

回顾

preventDefault 会取消浏览器的默认操作（跳转、提交等）。stopPropagation 会阻止事件向祖先元素冒泡，而 stopImmediatePropagation 还会阻止同一元素上的其他监听器。这些是彼此独立的工具；请谨慎停止传播，以免破坏事件委托。

常见问题解答

「preventDefault 与 stopPropagation」课时是免费的吗？

是的 — 「preventDefault 与 stopPropagation」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「preventDefault 与 stopPropagation」这节课中我会学到什么？

控制默认行为和冒泡。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「preventDefault 与 stopPropagation」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy