您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> Java 綜合教學

JS 中 window.location.href 跳轉失效原因分析與兩種解決方案

編輯：Java 綜合教學

JS 中 window.location.href 跳轉失效原因分析與兩種解決方案

在 `` 標籤或 `

` 表單的點擊/提交事件中調用 `window.location.href = "..."` 卻不跳轉，是經典前端坑點。本文分析根因並提供兩種標準修復方案。

問題場景

<a href="default.jsp" onclick="checkUser()">點擊</a>
<script>
function checkUser() {
    if (2 != 1) {
        window.location.href = "login.jsp";
    }
}
</script>

預期跳轉到 `login.jsp`，實際仍跳轉到 `default.jsp`（或表單提交）。

根本原因

瀏覽器事件處理順序：
1. 執行 `onclick` 處理函數（設置 `location.href`）。
2. 繼續執行元素**預設行為**：`` 跳轉 `href`、`` 提交 `action`。
3. 預設行為覆蓋了腳本設置的 `location.href`，導致跳轉失效。

解決方案一：阻止預設行為 `window.event.returnValue = false` (IE/舊版)

function checkUser() {
    if (2 != 1) {
        window.location.href = "login.jsp";
        window.event.returnValue = false;  // 取消 a 標籤預設跳轉
    }
}

缺點：非標準屬性，現代瀏覽器建議用 `event.preventDefault()`。

解決方案二：返回 false 切斷事件傳播（推薦）

HTML：onclick="return checkUser();"
JS：

function checkUser() {
    if (2 != 1) {
        window.location.href = "login.jsp";
        return false;  // 告訴瀏覽器取消預設行為
    }
    return true;  // 允許預設行為
}

原理：內聯事件處理函數返回 `false` 等同於 `event.preventDefault()` + `event.stopPropagation()`，阻止元素預設動作。

現代最佳實踐：分離事件綁定

document.getElementById("myLink").addEventListener("click", function(e) {
    if (condition) {
        window.location.href = "login.jsp";
        e.preventDefault();  // 標準 API 取消預設行為
    }
});

HTML 不混入 JS，結構行為分離。
使用 `Event.preventDefault()` 符合 W3C 標準，跨瀏覽器相容。
可進一步用 `Event.stopPropagation()` 控制冒泡。

總結

場景	問題	修復
<a onclick="fn()">	fn 設置 location.href 後，a 預設跳轉覆蓋	onclick="return fn()" + fn 返回 false
<form onsubmit="fn()">	fn 設置 location.href 後，表單提交覆蓋	onsubmit="return fn()" + fn 返回 false
addEventListener	同上	e.preventDefault()