event.preventdefault()的核心作用是阻止浏览器默认行为，需明确拦截目标并提供替代逻辑：表单提交时防刷新改ajax、右键禁用默认菜单展自定义面板、键盘操作中精准拦截冲突行为、触摸设备上防缩放/选中需结合css与同步js处理。
Event.preventDefault() 的核心作用是阻止浏览器对事件的默认处理逻辑，但它的使用必须建立在明确“什么默认行为需要被拦截”和“拦截后用什么逻辑替代”的基础上。盲目调用不仅无效，还可能破坏可访问性或用户体验。
表单提交时防止页面跳转，改用 AJAX 提交
用户点击表单提交按钮时，浏览器默认会收集字段、构造请求、刷新整个页面。若业务要求无刷新提交并保留当前状态（如多步骤表单、实时校验反馈），就必须拦截默认行为。
- 在
submit事件监听器中调用event.preventDefault()，确保不触发原生提交 - 手动读取表单字段值（可用
FormData或form.elements） - 用
fetch或axios发送请求，并根据响应更新 UI（如显示成功提示、跳转下一步） - 注意：仍需保留
button type="submit"语义，以支持键盘回车提交和屏幕阅读器识别
右键菜单中禁用默认上下文菜单，展示自定义操作面板
某些富文本编辑器、图表工具或资源管理界面需要完全控制右键行为——比如点击某张图片时，不弹出浏览器默认菜单，而是显示“复制链接”“下载原图”“设为封面”等定制选项。
- 监听目标元素的
contextmenu事件，立即执行event.preventDefault() - 随后调用自定义函数（如
showCustomContextMenu(x, y)），传入event.clientX/clientY定位浮层 - 务必只对明确需要接管的元素绑定该逻辑；全局监听
document.contextmenu会严重影响其他区域的正常使用 - 移动端无右键概念，此逻辑通常需配合长按事件（
touchstart+ 计时）实现等效体验
键盘操作中阻止滚动或快捷键冲突
当页面存在自定义滚动容器（如横向时间轴、代码编辑区）、或启用键盘导航（如方向键切换 tab、空格键播放视频）时，浏览器可能同时触发默认行为（如页面整体滚动、空格键触发页面下翻），造成干扰。
- 在
keydown中判断按键（如event.key === ' '或event.key === 'ArrowDown'），再决定是否拦截 - 仅当焦点落在目标控件内（如
event.target.closest('.timeline-container')）才调用preventDefault() - 拦截后立即执行业务逻辑（如
scrollLeft += 50），避免“按键无反应”的错觉 - 慎用
event.preventDefault()拦截Tab键——它关系到键盘可访问性，如需自定义 Tab 导航，应配合tabindex和focus()手动管理焦点流
触摸设备上防止误触发双击缩放或长按选中
在 H5 游戏、手势绘图、或全屏交互应用中，用户双击可能本意是“放大画布”，但浏览器默认会触发页面缩放；长按文字区域则会弹出系统选中菜单，干扰手写笔迹识别。
- 对容器元素设置 CSS：
touch-action: manipulation可默认禁用双指缩放与双击缩放，比 JS 拦截更轻量 - 如需精细控制，在
touchstart或dblclick中调用preventDefault()，但必须确保已阻止冒泡（event.stopPropagation()），避免影响父级手势 - 禁用长按选中推荐用 CSS：
-webkit-user-select: none; user-select: none;，比监听contextmenu或selectstart更稳定可靠 - 注意：iOS Safari 对
preventDefault()在touchstart中的调用有严格限制，需在非异步上下文中同步执行才生效
