Javascript 为什么点击一个'；s未标记为“提交”会导致表单提交吗？

这是我的表格。问题是当我点击第二个按钮时，它会将我注销

<form action="/Account/LogOff"
      id="logoutForm"
      method="post">
    @Html.AntiForgeryToken()
    <button class="small" type="submit" >Logout</button>
    <button id="theme" onclick="setThemeColor(this)">#</button>
</form>

@Html.AntiForgeryToken（）
注销
#

您可以通过返回false来取消元素的默认事件，在本例中为submit

<form action="/Account/LogOff"
      id="logoutForm"
      method="post">
    @Html.AntiForgeryToken()
    <button class="small" type="submit" >Logout</button>
    <button id="theme" onclick="setThemeColor(this)">#</button>
</form>

<button id="theme" onclick="setThemeColor(this); return false;">#</button>

#

添加：

<form action="/Account/LogOff"
      id="logoutForm"
      method="post">
    @Html.AntiForgeryToken()
    <button class="small" type="submit" >Logout</button>
    <button id="theme" onclick="setThemeColor(this)">#</button>
</form>

---

如果未指定该属性，或者该属性动态更改为空值或无效值，则按钮将作为提交。由于

没有为按钮指定类型属性

，因此其行为类似于提交。

因为按钮的默认类型是

提交

。看

<form action="/Account/LogOff"
      id="logoutForm"
      method="post">
    @Html.AntiForgeryToken()
    <button class="small" type="submit" >Logout</button>
    <button id="theme" onclick="setThemeColor(this)">#</button>
</form>

因此，您必须通过js或将其类型设置为

button

<form action="/Account/LogOff"
      id="logoutForm"
      method="post">
    @Html.AntiForgeryToken()
    <button class="small" type="submit" >Logout</button>
    <button id="theme" onclick="setThemeColor(this)">#</button>
</form>

<button id="theme" onclick="setThemeColor(this)" type="button">#</button>

#

如果使用

input

标记指定按钮，则不会发生这种情况。奇怪但真实

<form action="/Account/LogOff"
      id="logoutForm"
      method="post">
    @Html.AntiForgeryToken()
    <button class="small" type="submit" >Logout</button>
    <button id="theme" onclick="setThemeColor(this)">#</button>
</form>

例如：

<form action="/Account/LogOff"
      id="logoutForm"
      method="post">
    @Html.AntiForgeryToken()
    <button class="small" type="submit" >Logout</button>
    <button id="theme" onclick="setThemeColor(this)">#</button>
</form>

---

查看此处的演示：

这正是

按钮的工作方式。正确，但问题是“为什么会发生？”而不是“我如何停止它？”（尽管后者是隐式的）。@DavidThomas:默认事件是submit，它通过返回false取消。我会更新答案，让它更清楚。谢谢。这很有帮助，但老天，纽扣在过去可不是这样的，当然。。。
<form action="/Account/LogOff"
      id="logoutForm"
      method="post">
    @Html.AntiForgeryToken()
    <button class="small" type="submit" >Logout</button>
    <button id="theme" onclick="setThemeColor(this)">#</button>
</form>