必须用事件委托，因动态生成的链接DOM创建时不存在，无法直接绑定事件；应拦截同源、非下载、非新窗口且非锚点/协议链接，解析href后调用前端路由跳转并阻止默认行为。
单页应用（SPA）中，页面内大量通过 JavaScript 动态插入的 <a> 标签，常因未显式阻止默认行为而触发整页跳转，破坏路由体验。最可靠、低侵入的拦截方式是利用事件委托，在 document 或根容器上监听 click，统一捕获并判断是否为内部路由链接，再交由前端路由处理。
为什么必须用事件委托？
动态生成的链接（如列表渲染、模态框内容、富文本插入）在创建时 DOM 尚未存在，无法直接绑定事件。逐个监听不现实，且易漏绑、难维护。事件委托利用事件冒泡机制，在父级（如 document）统一监听，天然覆盖所有当前及未来插入的 <a> 元素。
如何精准识别“该拦截的链接”？
不是所有 <a> 都要拦截。关键看三点：是否指向本域、是否非下载/新窗口、是否非锚点跳转。建议按以下逻辑判断：
- 获取点击目标的
href属性（注意用getAttribute('href')，而非href属性值，后者已被浏览器转为绝对 URL） - 用
new URL(href, location.href)解析，对比origin是否与当前页一致 - 排除
target="_blank"、download属性、href以#或mailto:、tel:开头的情况 - 可额外支持约定前缀，如
/app/、/user/，或自定义data-router="true"标记
拦截后怎么交给前端路由？
阻止默认行为后，需将路径解析为路由动作。常见做法：
- 若使用 React Router v6+：调用
router.navigate(path)（需从useNavigate获取） - 若使用 Vue Router：调用
router.push(path)（需确保 router 实例可访问） - 若为原生 History API：用
history.pushState(null, '', path)+ 手动触发popstate或调用路由匹配逻辑 - 务必注意：拦截后应
event.preventDefault()，且推荐event.stopPropagation()避免重复触发其他监听器
完整可运行代码片段（兼容主流 SPA 场景）
将以下代码放入初始化逻辑（如入口 JS 或主组件挂载后），无需修改 HTML 结构：
document.addEventListener('click', function (e) {
const el = e.target.closest('a[href]');
if (!el) return;
const href = el.getAttribute('href');
if (!href || href.startsWith('#') || href.startsWith('mailto:') || href.startsWith('tel:')) return;
try {
const url = new URL(href, location.href);
// 仅拦截同源、非下载、非新窗口的链接
if (url.origin === location.origin && !el.hasAttribute('download') && el.target !== '_blank') {
e.preventDefault();
e.stopPropagation();
// 此处替换为你项目的路由跳转方法
navigateTo(url.pathname + url.search + url.hash);
}
} catch (err) {
// href 无效（如 javascript:void(0)）则忽略
}
});
// 示例跳转函数（需按实际框架实现）
function navigateTo(path) {
if (typeof window.history.pushState === 'function') {
window.history.pushState(null, '', path);
// 触发自定义路由事件或调用框架路由
window.dispatchEvent(new Event('routechange'));
}
}
