preventdefault 可阻止链接跳转、表单提交等默认行为，需在事件处理函数首行调用并确保事件对象正确传递；不可靠的 href="javascript:void(0)" 应被 javascript 事件绑定替代；注意勿在异步中调用、勿混用 return false，且需兼顾可访问性与实际需求。
用 preventDefault 可以阻止链接点击后跳转、表单提交后刷新页面等浏览器默认行为，关键是在事件处理函数中调用它，且确保事件对象正确传递。
给链接添加点击事件并阻止跳转
直接写在 HTML 的 href="javascript:void(0)" 或 href="#" 并不可靠，容易出错或影响可访问性。推荐用 JavaScript 绑定事件并调用 preventDefault：
- 监听
click事件，传入事件参数（如e） - 在函数开头立即执行
e.preventDefault() - 后续可自由执行 JS 逻辑，比如弹窗、AJAX 加载、路由跳转等
示例：
<a href="/old-page" id="myLink">点我但不跳转</a>
<script>
document.getElementById('myLink').addEventListener('click', function(e) {
e.preventDefault(); // 阻止跳转
console.log('已拦截，现在可以做别的事');
// 比如：history.pushState 或 fetch('/api/data')
});
</script>
拦截表单默认提交（页面刷新）
表单的 submit 事件触发时，浏览器默认会收集数据、发送请求、刷新页面。想用 AJAX 提交或校验后再发，就得阻止它：
- 监听表单的
submit事件（不是按钮的click） - 必须在事件回调第一行调用
e.preventDefault() - 否则表单可能已提交，JS 还没执行完
示例：
<script> document.getElementById('myForm').addEventListener('submit', function(e) { e.preventDefault(); // ⚠️ 必须放在最前面 const formData = new FormData(this); fetch('/api/submit', { method: 'POST', body: formData }) .then(r => r.json()) .then(data => console.log('成功:', data)); }); </script>注意 preventDefault 的常见误区
它只影响当前事件的默认行为，不会阻止事件冒泡，也不等于取消整个交互流程：
-
不能在异步回调里调用：比如
setTimeout(() => e.preventDefault())无效，因为默认行为早已发生 -
别和 return false 混用：在原生事件中，
return false同时阻止默认行为 + 阻止冒泡；但语义不清，建议明确写e.preventDefault()和e.stopPropagation() -
移动端需留意 click 延迟：iOS Safari 对非可点击元素的
click有约 300ms 延迟，建议给链接加cursor: pointer或用touchstart替代（若需极致响应）
什么时候不需要 preventDefault？
并非所有场景都要拦截。例如：
- 纯前端路由（如 Vue Router、React Router）通常已封装好
<router-link></router-link>或<link>，内部自动处理了preventDefault - 表单设置了
action和method且你确实希望服务端渲染跳转，那就该保留默认行为 - 无障碍需求下，某些链接本就该正常跳转（如帮助文档、隐私政策），强行拦截反而降低可用性
