js event.preventDefault()的作用

最新推荐文章于 2025-10-16 22:22:50 发布

原创最新推荐文章于 2025-10-16 22:22:50 发布 · 547 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

Vue.js 专栏收录该内容

64 篇文章

订阅专栏

好的，完全明白。我们这次彻底忘记 Vue，忘记所有复杂的函数，只聚焦在 event.preventDefault() 这一件事上。

这句话是它的核心：

“阻止这个元素天生该做的事。”

第一步：理解什么是“天生该做的事” (默认行为)

在浏览器中，很多 HTML 元素都有一个**“天生”的、默认的功能或行为**。这是浏览器赋予它们的本能。

我们来看几个最常见的例子：

<a> 标签 (链接)
- 它天生该做的事是什么？—— 点击后，跳转到 href 指定的新网址。
<form> 表单里的“提交”按钮 (<button type="submit">)
- 它天生该做的事是什么？—— 点击后，提交整个表单，并且通常会导致页面刷新。
<input type="checkbox"> (复选框)
- 它天生该做的事是什么？—— 点击后，在“选中”和“未选中”之间切换状态。

这些就是元素的默认行为 (Default Action)。

第二步：理解 `event.preventDefault()` 的作用

event.preventDefault() 的字面意思是“阻止默认行为”。

它的作用就是，在上述这些事件发生时，强行叫停，让元素不要去做它“天生该做的事”。

对 <a> 标签使用，它就不跳转了。
对 <form> 的提交按钮使用，表单就不提交、页面也不刷新了。
对复选框使用，它就点不动了，无法切换状态。

一个最直观的例子：阻止链接跳转

您可以将下面这段代码完整地复制到一个 .html 文件中，然后用浏览器打开它，亲身体验一下。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>preventDefault 演示</title>
</head>
<body>

    <h1>event.preventDefault() 的作用</h1>

    <p>下面有两个完全一样的链接，都指向谷歌。</p>

    <a href="https://www.google.com" target="_blank">
      1. 点击我，我会跳转 (正常链接)
    </a>

    <br><br>

    <a href="https://www.google.com" onclick="event.preventDefault()">
      2. 点击我，我不会跳转 (因为默认行为被阻止了)
    </a>

    <p style="margin-top: 20px;">
      尝试点击上面两个链接，看看有什么不同。
    </p>

</body>
</html>

体验结果：

当你点击第一个链接时，浏览器会打开一个新的标签页并跳转到谷歌。这是它“天生该做的事”。
当你点击第二个链接时，什么都不会发生。链接看起来可以点，但就是不跳转。

为什么第二个链接不跳转了？
因为在你点击它的那一瞬间，onclick 里的代码 event.preventDefault() 被执行了。浏览器正准备执行“跳转”这个默认动作，但这行代码像一个“红灯”一样，立即叫停了这个默认动作。

回到您最初的 `warn` 函数

现在我们再看您最初的代码：

function warn(message, event) {
  if (event) {
    event.preventDefault() // <-- 就是这一行
  }
  alert(message)
}

如果这个函数被用在一个表单的 submit 事件上（@submit="warn('...', $event)"），那么 event.preventDefault() 的具体作用就是：

“阻止这个表单提交和刷新页面”

这样一来，我们就有机会只弹出一个 alert 警告框，而页面本身保持原样，不会因为表单的提交而跳转或刷新。

希望这次的解释能让您彻底明白它的作用！