爲什麼提交表單覆蓋提交按鈕點擊處理程序中的設置location.href？

這個問題的靈感來自this post。爲什麼提交表單覆蓋提交按鈕點擊處理程序中的設置location.href？

總而言之：爲什麼window.location.href在執行下面的代碼時沒有重定向到新頁面（example.com）？

<form> 
    <input type="submit" id="submit" value="Submit"> 
</form> 
<script> 
    document.getElementById('submit').addEventListener('click', function (e) { 
     window.location.href = "http://www.example.com"; 
    }); 
</script>

我一直相信，該設置window.location.href立即加載一個新的頁面，但在這種情況下，它沒有。提交表單只是重新加載頁面，而設置新的位置似乎完全被忽略。爲什麼？怎麼樣？我在這裏錯過了什麼？

請注意，我知道如何防止表單在這種情況下提交的幾種方法，而我想知道，爲什麼設置location.href被忽略。

信息

這似乎在所有主要瀏覽器（Chrome，FF，IE11）的情況發生，而不是在代碼的堆棧段運行。放入函數alert/console.log顯示，點擊處理程序在submit之前執行。

A jsFiddle reproducing該問題。

來源

2014-10-17 Teemu

哈哈......好問題。 – brso05 2014-10-17 20:48:00

這是一個棘手的問題！最後，我認爲它與通過返回false來阻止表單的傳播有關。你的代碼甚至可能被重構來做到這一點，與我在下面提供的答案混合在一起。 – trnelson 2014-10-20 14:48:11

我不認爲他在問如何解決這個問題......他想知道爲什麼會發生這種情況。簡單地說，當表單提交時，取消了location.href更改，而是提交表單？ – 2014-10-20 14:50:40

你可以看到更容易在這裏發生了什麼一步一步，如果你會嘗試TU改變位置drunning表單提交

JSFIDDLE

如果您將檢查你的瀏覽器的網絡選項卡比你可以看到，提交申請被重定向請求取消（但仍然發送）。我相信，當您嘗試執行此操作時，會發生同樣的情況onclick或onsubmit第一個請求只是取消下一個請求並阻止window.location.href重定向。

enter image description here

來源

2014-10-20 14:44:45

嗯，我檢查了網絡流量（我的代碼）。在IE11和Chrome中，它只顯示了小提琴重新加載，沒有「位置」改變的跡象。在FF'位置'開始改變，但是隨後提交覆蓋它，'位置'請求留在後面（時間軸顯示「瀏覽器忙」）。 – Teemu 2014-10-20 15:17:03

-1

的主要問題是，沒有什麼阻止實際提交表單的提交按鈕。你會需要一個return false的地方發生。我不完全確定提交按鈕邏輯或點擊處理程序是否首先發生，但無論如何，表單發佈優先。

我能夠得到以下工作：

<html> 
<head> 
<script type="text/javascript"> 
    function redirect() { 
     window.location.href = "http://www.example.com"; 
     return false; 
    } 
</script> 
</head> 
<body> 
<form method="GET" action=""> 
    <input type="submit" id="submitbtn" value="Submit" onclick="return redirect()" /> 
</form> 
</body> 
</html>

這個例子確實刪除程序除了單擊事件，但如果這是一個硬性要求，應該可以加入，早在

來源

2014-10-20 14:44:56 trnelson

其實我沒有要求使用它。正如我所說，我知道如何防止這一點，但我只是好奇，爲什麼'window.location.href'被忽略。點火順序記錄清楚，首先點擊，然後提交。順便說一句。不是我的downvote。 – Teemu 2014-10-20 14:57:20

@Teemu，不用擔心，我顯然有點急於發表一個答案，並瞥了一眼，你並不是在尋找我提供的答案！ :)我最好的猜測是，不管順序如何，這兩個事件都被允許觸發，但表單提交優先。我想是在黑暗中拍攝的。 – trnelson 2014-10-20 15:01:05

我相信這裏的關鍵是不要將問題視爲「表單提交vs頁面重定向」，而是作爲事件監聽器問題。

你正在做的是將一個事件監聽器附加到一個html元素。看起來，DOM元素的策略是首先執行所有事件監聽器，然後執行事件本身。在你的情況，該頁面被重定向到你提供的網址，因爲你設置了窗口。在監聽器裏的位置，然後提交事件本身發生，所以同樣的空白頁面重新加載

，「所有的聽衆都被觸發後的事件流過程將完成」事實是，這裏所說：http://www.w3.org/TR/DOM-Level-2-Events/events.html

所以至今我還沒有找到在事件發生後執行聽衆的方法，但是如果可以這樣做的話，那麼這就是你需要做的這個例子的所有工作

來源

2014-11-04 18:17:45

問題是，頁面_is沒有被重定向_。如果是，則卸載頁面上的事件無法提交任何內容。這必須與環境有關，因爲重定向工作在[post]（http://stackoverflow.com/q/26430575/1169519）中的Stack代碼片段中，最初啓發我提出這個問題。 – Teemu 2014-11-04 18:37:12

爲什麼提交表單覆蓋提交按鈕點擊處理程序中的設置location.href？

回答

相關問題