为什么提交表单覆盖提交按钮点击处理程序中的设置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？

回答

相关问题