event.preventDefault() vs return false: 如何不搞坏你的 JavaScript

引言：为什么这个话题在 Stack Overflow 上如此火爆？

如果你曾经用 JavaScript 编写过链接点击或表单提交的处理程序，那么你很可能遇到过这样的情况：浏览器自行其是，无视你的逻辑。你为链接点击编写了 alert('你好！')，但浏览器却固执地跳转到另一个页面。熟悉吗？

正是在这里，两个传奇般的方法登场了：event.preventDefault() 和 return false。“该选哪个？”这个问题是 Stack Overflow 上最热门的问题之一，拥有数万次浏览。这并非没有道理：两者之间的区别至关重要，错误的选择可能导致难以捉摸的 Bug。

在本文中，我们将一劳永逸地弄清楚：

\n
• 什么是浏览器中的“默认行为”
\n
• 两种方法是如何工作的
\n
• 导致数千名开发者代码崩溃的主要区别
\n
• 何时使用每一种方法
\n
• 为什么 return false 并不总是坏事
\n

准备好了吗？我们开始吧！

1. 什么是“默认行为”？

在讨论方法之前，让我们先弄清楚我们到底要取消什么。浏览器是一台智能机器，对许多 HTML 元素都有内置的行为：

\n
• 链接 (<a>)：默认情况下，会跳转到 href 属性中的地址。
\n
• 表单 (<form>)：默认情况下，会将数据发送到服务器并重新加载页面。
\n
• 提交按钮 (<input type="submit">)：提交表单。
\n
• 上下文菜单（右键单击）：显示浏览器菜单。
\n

有时我们需要这种行为——例如，当用户确实想点击一个链接时。但通常我们想要拦截这个动作并执行我们自己的逻辑：在提交前验证表单、在模态窗口中打开链接、显示自定义上下文菜单。

这正是我们的主角们发挥作用的地方。

2. event.preventDefault() —— 绅士方法

这是事件对象 (event) 的一个方法。它只做一件事：取消浏览器的默认行为。

// 示例 1：取消链接跳转\ndocument.querySelector('a').addEventListener('click', function(event) {\n    event.preventDefault();\n    alert('链接没生效！我把它取消了。');\n});\n\n// 示例 2：取消表单提交\ndocument.querySelector('form').addEventListener('submit', function(event) {\n    event.preventDefault();\n    // 现在表单不会重新加载页面\n    // 可以执行 AJAX 请求或验证\n    console.log('表单未提交。正在检查数据...');\n});\n

请注意：preventDefault() 不会阻止事件冒泡。如果你有嵌套的处理程序，事件将继续沿着 DOM 树向上“冒泡”。

理解这一点很重要：如果你想同时取消默认行为并阻止事件冒泡，你需要调用两个方法：preventDefault() 和 stopPropagation()。

3. return false —— 一位老派但危险的朋友

而 return false 则是一个更复杂的家伙。这完全取决于你如何添加处理程序。

情况 1：HTML 属性 (onclick)

在远古时代（以及至今的旧代码中），处理程序是直接挂在 HTML 中的：

<a href="https://example.com" onclick="return false;">点我</a>\n\n<form onsubmit="return validateForm();">\n    <input type="submit" value="提交">\n</form>\n\n<script>\nfunction validateForm() {\n    // 如果返回 false —— 表单不会提交\n    // 如果返回 true —— 会提交\n    return false;\n}\n</script>\n

在