按钮 onclick Javascript 功能失败，但功能有效答案

【问题标题】：Button onclick Javascript function fails, but function works按钮 onclick Javascript 功能失败，但功能有效
【发布时间】：2013-10-25 17:18:39
【问题描述】：

在我的 html 文档中，我有这个：

<button onclick="doFunction()" type="submit" ...>Button</button>

函数如下所示：

doFunction() {
    var goToThisUrl = "www.spring_controller_method.com?redirectUrl=this_page";
    window.location.href = goToThisUrl;
}

doFunction() 中的url 是Java Spring 控制器方法的url。在该方法中，它操作数据库并返回一个字符串以重定向到它来自的页面：return "redirect:" + redirectUrl。

问题是按钮不起作用。当我单击该按钮时，页面会刷新，但不会对数据库中的数据进行操作。我知道这不是 spring 控制器方法的问题的原因有两个：

我在控制器方法中有一个断点，它没有被命中。
当我使用相同的doFunction() 代码并在 Chrome 开发者控制台上运行它时，会命中控制器方法断点，并更改数据库中的数据。

您知道为什么会发生这种情况吗？

【问题讨论】：

我猜你的表单正在提交 (button type="submit")，返回 false 以防止你的函数首先执行默认操作。

标签： javascript html function button dom-events

【解决方案1】：

从按钮中删除类型提交

<button onclick="doFunction()" type="button" ...>Button</button>

type="submit" 用于表单提交，这就是 onclick 不起作用的原因。

【讨论】：

只是澄清将type 值更改为“按钮”（就像您在答案中所做的那样）非常重要。 . .如果您只是删除type="submit" 属性，它将退回到默认值，也就是“提交”。 “button”是唯一没有与之关联的固有操作的值。
如果我从按钮中删除类型属性，它就像提交一样工作，我遇到了这个问题。不知道是什么问题。然后我替换提交到按钮。
是的。 . .这一切都在 HTML 规范中：w3.org/TR/html401/interact/forms.html#h-17.5 - “这个属性声明了按钮的类型......提交：创建一个提交按钮。这是默认值。”

【解决方案2】：

添加return false;以防止默认表单提交。

doFunction() {
    var goToThisUrl = "www.spring_controller_method.com?redirectUrl=this_page";
    window.location.href = goToThisUrl;
    return false;
}

【讨论】：

将return false; 放在函数的最开头会阻止它碰到函数中的任何其他逻辑。
是的。 :) 或者，您可以在函数之外执行此操作，在 onclick 中，如下所示：onclick="doFunction(); return false;"