Question

我在一个正在研究的网站上遇到了这个奇怪的代码，并且不明白我所看到的行为是如何或为何发生的。

<input type="submit" value="Save" onclick="document.location.href='http://www.google.com'" />

（更改了href;它实际上指向了与表单操作相同的URL）。

由于onclick事件在提交表单之前触发，我希望此代码将页面重定向到Google.com，从而停止执行页面并且永远不会提交表单。或者可能重定向到Google.com但仍然完成提交表单。

但是发生的事情似乎是重定向完全被忽略了，无论如何都要提交表单。为什么会发生这种情况？我确认onclick事件发射得很好;我将重定向移动到一个函数中并在onclick中调用了该函数。在提交之前调用该函数就好了，但重定向似乎被忽略了。

Answer 1

我刚刚在不同的浏览器中测试了这种行为，所有浏览器都给出了相同的结果，这是我的结论：

<!-- submit button inside form -->
<form method="post">
    <input type="submit" value="submit" /> <!-- onclick = submitted to same page -->
    <input type="submit" value="submitNredirect" onclick="document.location.href='http://www.google.com';" /> <!-- onclick = submitted to same page, ignored redirect -->
</form>
<!-- submit button without form -->
<input type="submit" value="submit" /> <!-- onclick = no submit or redirect occur -->
<input type="submit" value="submitNredirect" onclick="document.location.href='http://www.google.com';" /> <!-- onclick = redirect -->

如您所知，javascript是线性的，它执行首先出现的代码行。假设我们有这种形式：

<form id="myform" method="post" onsubmit="alert('onsubmit');">
    <input id="mybtn" type="submit" value="submit" onclick="alert('onclick');" />
</form>
<script>
    $(document).ready(function() {
        $('#mybtn').bind('click', function() {
            alert('bind click');
        });
        $('#myform').bind('submit', function() {
            alert('bind submit');
        });
        // onclick > bind click > onsubmit > bind submit
    });
</script>

单击按钮时，首先发生绑定到按钮的事件（“单击”事件），然后发生绑定到表单的事件（“提交”事件）。结果如下：

alert：onclick
alert：bind click
alert：onsubmit
alert：bind submit
表单提交

如果在任何函数中包含任何重定向代码，重定向将被忽略并且提交发生，我相信javascript会使用表单发布过程覆盖document.location.href，“表单提交”就像隐式/隐藏脚本末尾的代码行，如果您在某个时刻没有return false;，则会执行此隐式/隐藏行。

我不是专家，但这是我在经过一些测试后所理解的。如果我错了，请纠正我。

编辑：如果我们在每个函数中包含document.location.href怎么办？像这样：

<form id="myform" method="post" onsubmit="document.location.href='http://www.onsumbit.com';">
    <input id="mybtn" type="submit" value="submit" onclick="document.location.href='http://www.onclick.com';" />
</form>
<script>
    $(document).ready(function() {
        $('#mybtn').bind('click', function() {
            document.location.href='http://www.bindclick.com';
            return false;
        });
        $('#myform').bind('submit', function() {
            document.location.href='http://www.bindsumbit.com';
        });
    });
</script>

字符串值“href”的状态更改如下（但在脚本末尾执行重定向）：

document.location.href ='http://www.onclick.com';
document.location.href ='http://www.bindclick.com';
document.location.href ='http://www.onsubmit.com';
document.location.href ='http://www.bindsubmit.com';
document.location.href ='/'; //表单提交
javascript，根据“href”字符串值重定向

但我们在＃2之后有return false;，这意味着会重定向“http://www.bindclick.com”

Answer 2

<form action="http://www.yahoo.com" method="get">
<input type="submit" value="Save" onclick="document.location.href='http://www.google.com'" />
</form>

单击“保存”按钮，我发现除非您在onclick事件中添加return false，否则我将根据您将被定向到Yahoo（Chrome）的浏览器。在IE 10上，您将被定向到Google。

我认为编写浏览器的人必须回答这个问题。

Answer 3

您正在观察的是HTMLInputElement的处理程序的默认和继承行为，除非被覆盖。

<强>解决方案：

使用HTML5 button type-submit Element代替，所有现代浏览器都应该能够正确处理。

<form action="/" method="post" onsubmit="alert('submit event')">
  <input type="text" name="someinput" value="100">
  <button type="submit" onclick="alert('button onclick handled before form-submit')">submit</button>
</form>

<强>解释

您没有提供特定的浏览器，但是您可能正在使用WebKit，它对onsubmit / onclick事件层次结构before有疑问。

在项目的代码站点上，您可以搜索实现各种HTMLElement的代码例如，搜索onsubmit将导致Webkit onsubmit-event bubbling test。

解决此事件冒泡问题的一个选项是使用button并将其呈现为“提交”，方法是查找其封闭表单并通过函数(HTMLFormElement-instance).submit()提交。 / p>

另一种方法是更改表单的提交处理程序，这应该是您要查找的内容。

<form action="/" method="post" accept-charset="utf-8" id="myform3"
   onsubmit="event.stopPropagation(); event.cancelBubble = true;">
   A form with the default Browser submit-handler overwritten:
   <br>
   <input type="text" name="someinput" value="100">
   <input type="submit" name="commit" value="Submit" 
     onclick="alert('will alert first and submit later  using the browser default submit handler.');">
 </form>

所有案例均在此fiddle中进行了演示。

干杯！

Answer 4

我认为这是一个值得商榷的问题，

我会在行为方面回答，

表单的默认方法是GET，因此按下提交按钮表单将获取数据。来源Old Post

但如果您在document.location.href =“http://www.google.com”中包含e.preventDefault()

现在，如果链接是index.html，则会根据网站地址调用本地索引页面，因为您已删除了原始链接，因此无法判断原来这些链接使用的原因!!!？ ??

我可以在你的问题中说出这段代码，

<form onsubmit="javascript:alert('Form Submit called '+ this.method);">
    <input type=submit value=Submit onclick="javascript:document.location.href='http://www.google.com';alert('Button Submit');" />
</form>

这将清除流程的召唤。因为document.location.href永远不会使用此更改..

在更改href alert(document.location.href);后使用此代码，这将为您提供未更改的位置。

也许阻止默认行为可能会改变这种情况，但这不是代码的一部分..

我希望这会让事情更清楚。

如果您在表单提交之前尝试重定向会发生什么？

4 个答案: