作为一个在 Web 开发领域摸爬滚打多年的开发者，我们经常需要面对这样一个挑战：浏览器总是自作主张。当用户点击一个链接，浏览器就试图跳转；当用户提交表单，浏览器就试图刷新页面。虽然这些默认行为在大多数时候是友好的，但在构建现代、响应式且交互丰富的单页应用（SPA）时，它们往往会成为我们要克服的障碍。
你是否曾遇到过这样的尴尬时刻：你精心编写了一个表单验证逻辑，却在点击按钮的一瞬间，页面因为刷新而重置，导致你的验证结果一闪而过？或者，你想要创建一个纯前端的交互效果，点击链接时不跳转而是弹出模态框，但浏览器却无情地将用户带走了？
在这篇文章中，我们将深入探讨 event.preventDefault() 方法。这不仅仅是一个简单的 API 调用，更是我们与浏览器底层行为进行博弈的关键工具。我们将从基础概念出发，逐步深入到实际应用场景、代码实现细节，甚至是性能优化和常见陷阱。让我们一同探索如何利用这个方法，从浏览器手中夺回交互的控制权，打造流畅如丝的用户体验。
什么是 preventDefault()？
简单来说，event.preventDefault() 是事件对象上的一个方法。当我们在事件处理函数中调用它时，实际上是在告诉浏览器：“嘿，我知道这通常应该发生（比如跳转或刷新），但请先不要执行那个默认动作，我有自己的安排。”
它赋予了开发者拦截标准事件流的能力。请注意，这里我们说的是“阻止默认行为”，而不是“阻止事件传播”。阻止传播（冒泡）是另一个概念，通常使用 INLINECODE354e81d4 来处理，而 INLINECODEa441a09f 仅仅针对元素固有的行为起作用。
核心语法与参数
让我们先来看一下它的语法。这非常简单，不需要记忆复杂的参数列表。
#### 语法
event.preventDefault()
#### 参数说明
- 该方法不接受任何参数。
在这里，event 指的是传递给事件处理函数的事件对象。这个对象包含了关于当前事件的所有信息（如点击位置、触发按键、时间戳等）。我们的目标正是针对这个特定的事件实例，拦截其后续的默认浏览器行为。
基础示例：拦截链接跳转
让我们从一个最经典的场景开始：控制超链接 `INLINECODE8ba4d485INLINECODE71c8a22fhrefINLINECODEa7523406preventDefault()INLINECODE659c9610.click()INLINECODE325dbb3aeventINLINECODE899a68b7event.preventDefault()INLINECODEd629536eaINLINECODE0af7b11dalertINLINECODEcc9f0ed9preventDefault()INLINECODEd40e01ccsubmitINLINECODE16de9851submitINLINECODE04df4bc7buttonINLINECODE8472ce63clickINLINECODEb0ec7757clickINLINECODE6e86fc91submitINLINECODE8fb5993epreventDefault()INLINECODE049a49fcdocument.getElementByIdINLINECODE87da04d3addEventListenerINLINECODE53be7001if (!checkbox.checked)INLINECODE05b7d3b2event.preventDefault()INLINECODEd8331730preventDefault()INLINECODE6ba00e13contextmenuINLINECODE3315b89eCtrl+SINLINECODE8552536bINLINECODE88e1b2b9doSomethingINLINECODEfd455546event.preventDefault()INLINECODE7eb75b2aeventINLINECODE14ed5762onclick="doSomething(event)"INLINECODE9e8b0452addEventListenerINLINECODE44ea2e83INLINECODEd474df41INLINECODEe74800e3document.getElementByIdINLINECODE59c561bdnullINLINECODE1407c2f5INLINECODE720705e6DOMContentLoadedINLINECODE073e4afdreturn falseINLINECODEfb0ea38aevent.preventDefault()INLINECODE7ec6149devent.stopPropagation()INLINECODE67133a68return falseINLINECODEa9e4c361preventDefaultINLINECODEecbedcdaevent.preventDefault()INLINECODEa112969areturn falseINLINECODE92a07405preventDefault()INLINECODE3a1629d0scrollINLINECODEc484c4f4resizeINLINECODEee2d35fbpreventDefaultINLINECODE2db8c100wheelINLINECODEbbb65518touchstartINLINECODEad86939apreventDefault()INLINECODE34d4fbc1{ passive: false }INLINECODE5c1d603dpreventDefault()INLINECODEa74c8870event.preventDefault()INLINECODE188dc186addEventListenerINLINECODEaa846f31submitINLINECODE8d1edc6aclickINLINECODEe516efefpreventDefaultINLINECODE8095abd8event.stopPropagation()INLINECODE2efb86a8event.stopImmediatePropagation()，了解它们如何与 preventDefault()` 协同工作，从而让你对事件循环有完全的掌控。祝你编码愉快！