preventDefault()用于阻止可取消事件的默认行为，如表单提交刷新、链接跳转、空格键滚动等，需在事件处理函数中调用，且仅对cancelable为true的事件生效。
在 JavaScript 中，preventDefault() 用于阻止元素的默认行为，比如点击链接跳转、表单提交刷新页面、按空格键滚动等。它必须在事件处理函数中调用，且只对可取消的事件（cancelable === true）生效。
什么时候需要 preventDefault
常见场景包括：
- 自定义表单提交逻辑（如用 Ajax 提交），避免页面刷新
- 阻止链接跳转，改用 JS 控制路由或弹窗
- 禁用右键菜单、文本选中、拖拽等原生交互
- 在键盘事件中拦截回车/空格键的默认操作（如按钮自动触发）
基本用法：绑定事件并调用 preventDefault
以表单提交为例：
event.preventDefault()
document.querySelector('form').addEventListener('submit', function (e) {
e.preventDefault(); // 阻止表单默认提交和页面刷新
// 这里写你的自定义提交逻辑，比如 fetch 请求
});
常见误区和注意事项
- 事件对象必须存在：箭头函数中若未显式传入 event 参数，会拿不到 event 对象
-
不是所有事件都能取消：可通过
e.cancelable判断，返回false时调用无效 -
不要滥用：比如阻止所有右键（
contextmenu）会影响用户调试和复制，应有明确理由 - 与 stopPropagation 区分：preventDefault 只管“行为”，stopPropagation 管“冒泡”，两者互不影响
结合键盘事件的小例子
阻止空格键在内容区触发滚动：
立即学习“Java免费学习笔记（深入）”；
document.getElementById('myDiv').addEventListener('keydown', function (e) {
if (e.code === 'Space') {
e.preventDefault(); // 按空格时不滚动页面
}
});
这样用户在该区域按空格就不会触发浏览器默认的向下滚动行为，适合做自定义快捷键或游戏控制。
