应优先在事件捕获阶段绑定全局click监听器于document，早于默认行为触发，配合URL解析与同源判断精准拦截内部链接，并调用对应路由API实现SPA导航。
在单页应用（SPA）中，要优先拦截所有超链接跳转，事件捕获阶段是理想切入点——它从 document 开始向下传递，早于目标元素的事件处理和默认行为触发，因此能比常规点击监听更早介入。
利用捕获阶段绑定全局 click 监听
在根节点（如 document 或 document.body）上使用 addEventListener 的第三个参数设为 true，即可启用捕获模式。此时，哪怕用户点击的是深层嵌套的 <a href="..."></a>，该监听器也会在事件到达链接本身前就被调用。
- 务必在应用初始化早期执行（如入口 JS 最上方或
DOMContentLoaded后立即注册），避免漏掉动态插入的链接 - 只监听
click，不要监听mousedown或keydown（回车触发跳转），因它们不保证与导航语义一致 - 检查
event.target是否为a标签且含href属性，再判断是否应拦截
精准识别需拦截的链接（避免误伤）
不是所有 <a></a> 都该被 SPA 拦截。常见需放行的情况包括：带 target="_blank"、download 属性、以 mailto:/tel:/javascript: 开头的 href，或指向站外域名的链接。
- 用
new URL(event.target.href, document.baseURI)安全解析 URL，再比对origin判断是否同源 - 对相对路径、
/xxx、./xxx、../xxx等，统一补全为完整 URL 再判断 - 可约定内部路由前缀（如
/app/、#/），仅对匹配的链接调用event.preventDefault()
拦截后手动触发路由跳转
调用 event.preventDefault() 阻止默认跳转后，需主动通知路由系统。不同框架方式略有差异：
立即学习“Java免费学习笔记（深入）”；
- React Router v6+：调用
router.navigate(to)（需通过useNavigate获取） - Vue Router：调用
router.push(to)（需确保在 setup 或组合式 API 中正确获取 router 实例） - 原生 History API：用
history.pushState()+dispatchEvent(new Event('popstate'))触发路由响应 - 注意保留滚动行为、
replace标志（如href含?_replace=1）和自定义状态字段
兼容性与边界情况处理
捕获监听虽广泛支持（IE9+），但仍有细节需兜底：
- 右键 → “在新标签页打开” 不触发页面 click，无法拦截；这类属于浏览器原生行为，无需也不应干预
- 键盘回车激活链接时，
click事件仍会正常冒泡/捕获，无需额外监听keydown - 动态渲染内容（如 Markdown 解析后的链接）可能晚于监听器注册，建议监听
document而非局部容器，确保覆盖全局 - 第三方组件内联的
onclick="location.href=..."会绕过事件监听，应推动改用标准<a href></a>或提供配置关闭内联跳转
