jQuery Academy · 课时

停止事件传播

理解 .stopPropagation() 和 .preventDefault()，有效控制事件流、阻止浏览器默认操作并管理复杂的事件交互。

第 2 / 3 课11 个步骤

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

控制您的事件！

点击或表单提交之类的事件并不只发生在某个元素上。它们通常会沿着文档对象模型（DOM）传播。

学会控制这种传播流程，是构建精准且具有交互性的网页的关键。

阻止默认操作

浏览器会为许多 HTML 元素执行默认操作。例如：

点击 <a> 标签会导航到新页面。
提交 <form> 会重新加载页面。

我们使用 event.preventDefault() 来阻止这些浏览器内置行为。

`preventDefault()` 的实际应用

试着点击下面的链接。正常情况下，它会带您前往 example.com，但 .preventDefault() 会阻止这次导航！

<!DOCTYPE html>
<html>
<head>
<title>Prevent Default</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <h1>Prevent Default Example</h1>
  <a href="https://example.com" id="myLink">Click Me! (Should not navigate)</a>
  <div id="output"></div>

  <script>
  $(document).ready(function() {
    $('#myLink').on('click', function(event) {
      event.preventDefault(); // Stop the link from navigating
      $('#output').append('<p>Link click prevented! You\'re still here.</p>');
    });
  });
  </script>
</body>
</html>

理解事件冒泡

当事件发生在某个元素上（例如点击事件），它不会只触发该元素上的处理程序，而是会沿着 DOM 树向上“冒泡”。

它会触发该元素父级上的处理程序。
然后触发祖父级上的处理程序。
以此类推，一直传播到 <body> 和 <html>。

这种向上的传播过程称为事件冒泡。

停止冒泡：`stopPropagation()`

有时，您希望事件只由它发起的元素处理，或者只由某个特定的父级处理，而不影响更高层级的元素。

这时就可以使用 event.stopPropagation()。它会阻止事件继续沿 DOM 树向上冒泡。

`stopPropagation()` 示例

点击内部框。如果不使用 stopPropagation()，两条消息都会显示。使用后，只会显示内部框的消息，因为冒泡被阻止了。

<!DOCTYPE html>
<html>
<head>
<title>Stop Propagation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  #outer {
    padding: 20px;
    background-color: lightblue;
    border: 1px solid blue;
    margin: 10px;
  }
  #inner {
    padding: 20px;
    background-color: lightcoral;
    border: 1px solid red;
    margin-top: 10px;
  }
</style>
</head>
<body>
  <h1>Stop Propagation Example</h1>
  <div id="outer">
    Outer Div (Click me!)
    <div id="inner">
      Inner Div (Click me!)
    </div>
  </div>
  <div id="log"></div>

  <script>
  $(document).ready(function() {
    $('#outer').on('click', function() {
      $('#log').append('<p>Outer Div clicked!</p>');
    });

    $('#inner').on('click', function(event) {
      event.stopPropagation(); // Stop bubbling here
      $('#log').append('<p>Inner Div clicked!</p>');
    });
  });
  </script>
</body>
</html>

停止冒泡的实际用途

stopPropagation() 适用于以下场景：

模态对话框：防止点击模态框内部时触发遮罩层点击，从而关闭模态框。
嵌套下拉菜单：父级被点击时，保持子级下拉菜单处于打开状态。
复杂用户界面组件：确保特定组件的事件处理程序不会与全局监听器互相干扰。

事件对象

.preventDefault() 和 .stopPropagation() 都是事件对象的方法。这个对象会作为参数传递给您的事件处理函数。

事件对象包含许多有关所发生事件的有用信息，例如事件类型、目标元素和鼠标坐标。

<!DOCTYPE html>
<html>
<head>
<title>Event Object</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <h1>Event Object Properties</h1>
  <button id="myButton">Click Me</button>
  <div id="output"></div>

  <script>
  $(document).ready(function() {
    $('#myButton').on('click', function(event) {
      $('#output').empty(); // Clear previous output
      $('#output').append('<p>Event Type: <code>' + event.type + '</code></p>');
      $('#output').append('<p>Target Element ID: <code>' + event.target.id + '</code></p>');
      $('#output').append('<p>Mouse X Position: <code>' + event.pageX + '</code></p>');
      $('#output').append('<p>Mouse Y Position: <code>' + event.pageY + '</code></p>');
    });
  });
  </script>
</body>
</html>

组合使用两种方法

有时，您需要同时使用 .preventDefault() 和 .stopPropagation()。它们解决的是不同的问题：

.preventDefault()：阻止浏览器的默认操作。
.stopPropagation()：阻止事件沿 DOM 向上传播。

例如，复杂组件中的按钮可能需要阻止默认的点击行为，并且阻止点击触发父级处理程序。

理解事件控制

在 div <div id="container"> 内有一个链接 <a href="#" id="link">。您希望阻止该链接进行导航，同时阻止点击事件触发 #container 上的任何处理程序。

在交互式课程中回答

回顾：事件控制

做得很好！您已经学会了控制事件传播流程：

.preventDefault()：阻止浏览器对事件执行默认操作（例如链接导航和表单提交）。
.stopPropagation()：阻止事件沿 DOM 树向上冒泡到父级元素。

这些强大的方法可以让您精确控制网页应用中的事件行为，从而带来更加可预测且可靠的用户体验。

免费开始

用 AI 导师学习 JavaScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 22
课程: 48

免费开始学习查看完整课程

常见问题解答

「停止事件传播」课时是免费的吗？

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

「停止事件传播」这节课中我会学到什么？

理解 .stopPropagation() 和 .preventDefault()，有效控制事件流、阻止浏览器默认操作并管理复杂的事件交互。你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 jQuery Academy 需要有经验吗？

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

「停止事件传播」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 jQuery Academy