js event.preventDefault()的作用

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

这句话是它的核心:

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


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

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

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

  1. 标签 (链接)

    • 它天生该做的事是什么?—— 点击后,跳转到 href 指定的新网址
  2. 表单里的“提交”按钮 (
  3. (复选框)

    • 它天生该做的事是什么?—— 点击后,在“选中”和“未选中”之间切换状态

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

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

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

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


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

您可以将下面这段代码完整地复制到一个 .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 警告框,而页面本身保持原样,不会因为表单的提交而跳转或刷新。

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

你可能感兴趣的:(js event.preventDefault()的作用)