JavaScript 阻止默認行為：e.preventDefault() 導致超鏈接失效的排查與修復

根因定位

代碼中存在全局點擊攔截：

document.addEventListener('click', function(e) {
    // ... 某些條件判斷 ...
    e.preventDefault(); // 關鍵：無條件/誤判條件下阻止默認行為
});

修復方案

1. 精確條件判斷：僅在真正需要攔截時調用 `preventDefault()`。

   document.addEventListener('click', function(e) {
       const link = e.target.closest('a[href]');
       if (link && shouldIntercept(link)) { // 自定義判斷邏輯
           e.preventDefault();
           // 自定義處理：SPA 路由、確認彈窗、統計上報...
       }
   });

2. 排除特定鏈接：給不想攔截的鏈接加 `data-no-intercept` 或 class。

   if (link && !link.matches('[data-no-intercept]')) { e.preventDefault(); }

3. 使用事件委託 + 白名單：

   document.body.addEventListener('click', e => {
       const a = e.target.closest('a[href]');
       if (!a) return; // 非鏈接不處理
       if (a.matches('.external, [target="_blank"], [download]')) return; // 白名單放行
       e.preventDefault();
       router.navigate(a.href);
   });

調試技巧

最佳實踐

• **SPA 路由攔截**僅針對同源、無 `target`、`download`、外部域名的鏈接。
• **表單提交攔截**監聽 `submit` 事件而非 `click`，更語義化。
• **統計上報**用 `navigator.sendBeacon` 或 `fetch(..., {keepalive:true})`，不阻塞導航。

**核心：`preventDefault()` 是雙刃劍，精準條件 + 白名單機制，才能兼顧攔截需求與正常跳轉。**