迹忆客 专注技术分享

浏览器对不同的事件有默认的交互和行为。

例如，当用户单击表单上的“提交”按钮时，表单默认提交到一个 URL。

当点击一个元素的子元素时，点击事件也会发生在该元素上，因为它是主要的容器。

在某些情况下，我们可能想要覆盖这些默认值。 在本文中，我们将学习什么是 event.preventDefault() 和 event.stopPropagation() 方法，以及如何使用它们来取消浏览器中发生的一些默认操作。

event.preventDefault()

此方法可防止浏览器在触发事件时执行的默认操作。

以下是网页上默认操作的一些示例以及如何使用 event.preventDefault() 覆盖它们。

如何覆盖默认表单提交

当用户提交表单（单击提交按钮）时，表单的默认操作是将表单数据提交到处理数据的 URL。

表单元素具有 action 和 method 属性，它们分别指定提交表单的 URL 和请求的类型（get、post 等）。

如果未提供这些属性，则默认 URL 是提交表单的当前 URL，方法是 get。

例如，这段代码：

<form>
  <input name="email" />
  <input name="password" />
  <input type="submit" />
</form>

在提交输入“dillion”和“password”的表单时，我们可以看到一个提交到 localhost/jiyik.html 的获取请求，如下所示：

此操作是浏览器默认处理表单的方式。

但是我们可能希望在发送请求之前对数据做更多的事情。 这在当今处理表单的方法中尤为常见。

在将请求发送到 URL 之前，我们可能希望进行一些数据验证、数据检查、处理、配置标头等。

在这些情况下，我们会希望阻止表单的默认操作。 就是这样：

<form id='form'>
  ...
</form>

const form = document.getElementById('form')

form.addEventListener('submit', (event) => {
  event.preventDefault()
  
  // 处理数据并手动提交请求
})

这样，提交表单就在我们手中。

单击链接时如何覆盖默认操作

当我们单击链接（具有 href 属性的锚标记 a）时，默认操作是在浏览器上导航到单击的链接。

如果我们想拦截该动作并可能在导航之前做一些事情怎么办？ 例如，检查用户是否有权访问他们想要导航到的页面。 这是我们所做的：

<a id="link" href="https://www.jiyik.com">迹忆客</a>

const link = document.getElementById("link")

link.addEventListener("click", event => {
  event.preventDefault()

  // 做一些跳转
})

你可以测试一下。 当点击“迹忆客”链接时，不会出现导航——因为我们阻止了默认导航操作。 现在，我们必须自己处理导航。

event.stopPropagation()

传播是传播某些东西（在本例中为事件）的行为。 stopPropagation 方法用于防止在元素上触发事件时传播事件。

在 JavaScript 中，当你在一个元素上触发一个事件时，它会向上冒泡到该元素的父元素和祖先元素。 基本上，带有事件的元素在父级容器“内部”，因此父级也接收事件。

为了更好地解释这一点，我将使用一个示例。

单击元素的子元素

假设我们具有以下元素：

<div>
  <button>Click me</button>
</div>

当你点击按钮时，你也点击了 div 容器，因为按钮在容器中。 这个逻辑意味着点击事件从按钮传播到容器，事件不断传播到所有祖先借点，直到它到达根节点。

为了验证这一点，我将解释它如何使用这段代码：

<div id="div">
  <button id="button">Click me</button>
</div>

const div = document.getElementById('div')
const button = document.getElementById('button')

button.addEventListener('click', () => {
  console.log('button clicked')
})

div.addEventListener('click', () => {
  console.log('div container clicked')
})

当我们尝试在浏览器上运行它并单击按钮时，将得到以下结果：

div容器也接收到点击事件，所以点击回调函数也被调用。

事件传播是事件和元素的默认行为，但在某些情况下，我们可能不需要某些行为。

在这里要避免的一件事是，在单击任何按钮时，我们不希望单击事件传播到父节点并执行该事件的函数。

在这种情况下，我们想停止传播。

假设弹出窗口是这样构建的：

<div id='top-bar'>
  <!-- The Message Element -->
  <!-- The Buttons -->
</div>

const topBar = document.getElementById('top-bar')
const closeButton = document.getElementById('close-btn')

topBar.addEventListener('click', () => {
  // minimize or maximize popup
})

closeButton.addEventListener('click', () => {
  // close popup
})

我们还需要将 stopPropagation 方法添加到按钮的侦听器，以避免将事件传播到顶部栏。 为此，我们需要将按钮的侦听器更新为：

closeButton.addEventListener('click', (event) => {
  event.stopPropagation()
  // close popup
})

有了这个，父节点只有在被直接点击时才会收到点击事件。

总结

event.preventDefault() 和 event.stopPropagation() 的区别在于前者阻止浏览器的默认行为，而后者阻止事件的默认行为——向上传播树。

这些默认操作和行为不是错误，我们在编写代码时不必担心它们。 但是在某些情况下想要覆盖它们，正如我们在本文的示例中所看到的那样。