6

我在我正在处理的网站中遇到了这个奇怪的代码，但我不明白我所看到的行为是如何发生或为什么发生的。

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

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

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

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

4

4 回答 4

5

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

<!-- 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>

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

  1. 警报：点击
  2. 警报：绑定点击
  3. 警报：提交时
  4. 警报：绑定提交
  5. 表单提交

如果您在任何函数中包含任何重定向代码，重定向将被忽略并发生提交，我相信 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”的字符串值的状态变化如下（但在脚本末尾执行重定向）：

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

但我们return false;在 #2 之后，这意味着将为“ http://www.bindclick.com ”做重定向

于 2013-08-25T10:01:10.547 回答
0

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

我会在行为方面回答，

表单的默认方法是GET按下提交按钮表单将获取数据。来源旧帖

但是如果你已经e.preventDefault()包含在 document.location.href="http://www.google.com"

现在，如果链接是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);这将为您提供未更改的位置。

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

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

于 2013-08-28T06:27:38.227 回答
0 
<form action="http://www.yahoo.com" method="get">
<input type="submit" value="Save" onclick="document.location.href='http://www.google.com'" />
</form>

单击 Save 按钮，我发现取决于您将被定向到 Yahoo (Chrome) 的浏览器，除非您将 return false 添加到 onclick 事件。在 IE 10 上，您会被定向到 Google。

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

于 2013-08-25T05:46:21.270 回答
0

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

解决方案：

改用HTML5 按钮 type-submit 元素，所有现代浏览器都应该能够正确处理。

<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层次结构有问题。

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

解决此事件冒泡问题的一种选择是使用 abutton并将其呈现为“提交”，方法是找到它的封闭表单并通过 function 提交它(HTMLFormElement-instance).submit()。

另一个是通过更改表单的提交处理程序，这应该是您正在寻找的。

<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>

所有案例都在这个小提琴中演示。

干杯!

于 2013-08-25T11:42:28.847 回答