在网页操作中，有些元素自带默认行为。比如点击链接会跳转页面，提交表单会刷新页面，右键会弹出菜单。这些行为大多数时候是合理的，但在某些交互场景下，我们并不希望它们立刻发生。
什么时候需要阻止默认行为？
举个例子，你在一个购物网站上填写订单，点了一下“提交订单”，但还没填完收货地址。这时候如果页面直接跳走了，用户体验就很差。理想的情况是先检查表单是否填完整，没问题再跳转。这就需要用到 ref="/tag/137/" style="color:#8B0506;font-weight:bold;">JavaScript 来阻止默认的提交动作。
另一个常见场景是用 JavaScript 实现自定义右键菜单。浏览器默认的右键菜单不适合管理后台的操作需求，你想自己弹出一个包含“编辑”“删除”“复制”的菜单，就得先把系统默认的给拦下来。
如何用代码阻止默认行为？
JavaScript 提供了 preventDefault() 方法，只要在事件处理函数中调用它，就能阻止元素的默认动作。
document.getElementById('myLink').addEventListener('click', function(e) {
e.preventDefault();
alert('你点击了链接，但我们阻止了跳转');
});
上面这段代码绑定了一个链接的点击事件。原本点击后应该跳到 href 指定的页面，但由于调用了 e.preventDefault()，跳转被取消，只弹出提示框。
表单提交中的应用
表单是最典型的使用场景之一。很多现代网页都希望在不刷新页面的情况下提交数据，这就必须先阻止表单的默认提交行为。
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
const username = this.username.value;
const password = this.password.value;
if (!username || !password) {
alert('请填写用户名和密码');
return;
}
// 这里可以发送 AJAX 请求提交数据
console.log('正在登录：', username);
});
这样用户点击“登录”按钮时，页面不会刷新，而是由 JavaScript 控制后续逻辑，比如验证输入、调接口、显示加载状态等。
结合条件判断更灵活
有时候你并不想完全禁止默认行为，而是根据条件决定是否阻止。比如只有表单验证失败时才阻止提交，否则让页面正常跳转。
link.addEventListener('click', function(e) {
const confirmed = confirm('确定要离开当前页面吗？');
if (!confirmed) {
e.preventDefault();
}
});
这种写法常用于提醒用户“你还有未保存的内容”，如果用户点“取消”，就通过 preventDefault 拦截跳转，避免误操作导致数据丢失。
掌握 preventDefault() 能让你更自由地控制页面交互。它不是为了彻底否定浏览器的默认行为，而是在合适的时机介入，让体验更顺畅。只要记得在事件回调中接收事件对象 e，并按需调用对应方法，就能轻松实现各种定制逻辑。