在网页开发中，经常遇到需要阻止某些默认操作的情况。比如点击链接时不跳转页面，或者表单提交时不刷新页面。这时候就需要用到 ref="/tag/137/" style="color:#E3A3CF;font-weight:bold;">JavaScript 的阻止默认行为功能。
什么是默认行为
浏览器对一些元素有预设的操作反应。例如，点击一个 a 标签会跳转到指定 URL；点击提交按钮会让表单自动提交并刷新页面。这些就是默认行为。有时候我们希望先执行自己的逻辑，再决定是否执行这些动作，这时就要手动阻止它。
如何使用 preventDefault()
JavaScript 提供了 event.preventDefault() 方法，可以在事件触发时阻止其默认行为。这个方法常用于事件监听函数中。
比如有一个登录表单，你想在提交前验证用户输入：
<form id="loginForm">
<input type="text" name="username" placeholder="用户名" required>
<input type="password" name="password" placeholder="密码" required>
<button type="submit">登录</button>
</form>document.getElementById('loginForm').addEventListener('submit', function(e) {
// 阻止表单默认提交
e.preventDefault();
// 手动验证数据
const username = this.username.value;
const password = this.password.value;
if (username && password) {
alert('正在登录...');
// 这里可以发送 AJAX 请求
} else {
alert('请填写完整信息');
}
});这样即使用户点了“登录”，页面也不会刷新，而是先走我们的校验流程。
阻止链接跳转
有时页面上有个链接只是用来触发弹窗或菜单展开，并不想真的跳转。这时候也可以用同样的方式处理。
<a href="https://example.com" id="popupLink">点我弹出提示</a>document.getElementById('popupLink').addEventListener('click', function(e) {
e.preventDefault();
alert('你点击了链接，但不会跳转');
});点击后就不会打开 example.com，而是只显示提示框。
注意使用的场景
并不是所有情况都适合阻止默认行为。比如普通导航链接应该保持可访问性，盲人用户依赖屏幕阅读器识别跳转目标。如果只是为了实现某种交互效果而完全禁用跳转，可能会影响用户体验和无障碍支持。
合理的做法是：保留原始链接作为备用路径，同时增强交互体验。例如：
document.getElementById('smartLink').addEventListener('click', function(e) {
if (!userLoggedIn) {
e.preventDefault();
showLoginModal();
}
});未登录时点击弹出登录框，已登录则正常跳转，兼顾功能与体验。
掌握 preventDefault() 能让网页交互更灵活，但也要根据实际需求合理使用，避免过度干预浏览器的自然行为。