直接调用 e.preventDefault() 可阻止默认行为，但需满足三条件：传入事件对象、同步调用、事件支持取消（e.cancelable === true）；常见可阻止行为包括链接跳转、表单提交、右键菜单等。
直接在事件处理函数中调用 e.preventDefault() 就能阻止 DOM 元素的默认行为，但必须满足三个关键条件：事件对象要传入、调用要同步、且该事件本身支持取消（e.cancelable === true）。
哪些默认行为能被阻止？
不是所有操作都有可取消的默认行为。常见可阻止的包括：
- 点击
<a href="..."></a>触发的页面跳转 - 表单
<form></form>提交时的页面刷新 - 右键点击弹出浏览器上下文菜单（
contextmenu事件） - 空格键（
Space）或方向键触发的页面滚动（部分移动端受限） - 文本框中回车提交表单、粘贴内容等原生交互
正确写法和常见错误
核心是绑定到正确的事件、传入 event 参数，并在第一行调用：
- ✅ 正确：监听
form的submit事件，而非按钮的click - ✅ 正确：使用
addEventListener，并在回调中写e.preventDefault() - ❌ 错误：在箭头函数里漏掉参数，如
() => { e.preventDefault() }（e未定义） - ❌ 错误：异步调用，如
setTimeout(() => e.preventDefault(), 0)（事件已结束） - ❌ 错误：对不可取消事件调用，如
load或scroll（非用户触发）
安全调用建议
避免静默失效，推荐加上判断：
立即学习“Java免费学习笔记（深入）”；
- 先检查
if (e.cancelable) e.preventDefault(); - 若需同时阻止冒泡，单独加
e.stopPropagation()，不要混用return false - 内联 HTML 事件（如
onclick）无法直接访问event，应改用 JS 绑定 - 框架中（如 Vue/React）优先使用其语法糖，例如 Vue 的
@submit.prevent
典型代码示例
阻止链接跳转：
document.querySelector('a').addEventListener('click', e => {e.preventDefault();
console.log('已拦截跳转');
});
阻止表单提交并改用 fetch：
document.querySelector('form').addEventListener('submit', e => {e.preventDefault();
fetch('/api/submit', { method: 'POST', body: new FormData(e.target) });
});
