javascript - 为什么单击未标记为提交的按钮会导致提交表单？

Question

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

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

Answer 1

因为按钮的默认类型是submit. 请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

出于这个原因，您必须通过 js 或将其类型设置为button

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

Answer 2

您可以通过返回 false 来取消元素的默认事件，在这种情况下为提交；

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

添加：

如果未指定该属性，或者该属性被动态更改为空值或无效值，则按钮将表现为提交。既然你have not specified type attribute到你的按钮，它的行为就像一个提交。

Answer 3

如果您使用input标签指定按钮，则不会发生这种情况。奇怪但真实。

例如：

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

在此处查看演示：http: //jsfiddle.net/Kjk4y/