我有一个表格。在那个表格之外，我有一个按钮。一个简单的按钮，如下所示：
极客观点
项目管理
HarmonyOS
<button>My Button</button>
不过，当我单击它时，它会提交表单。这是代码：
<form id="myform">
<label>Label
<input />
</label>
</form>
<button>My Button</button>
这个按钮应该做的只是一些 JavaScript。但即使它看起来就像上面的代码一样，它也会提交表单。当我将标签按钮更改为跨度时，它可以完美运行。但不幸的是，它必须是一个按钮。有没有办法阻止该按钮提交表单？像例如
<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>
原文由 arik 发布，翻译遵循 CC BY-SA 4.0 许可协议
还有一种方法可以防止在单击按钮时进行提交。为此，您必须使用 event.preventDefault() 方法。
document.querySelector("button#myButton").addEventListener("click", (event) => {
document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you submit this!<br>";
event.preventDefault();
}, false);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<form id="myform">
<label>Label
<input />
</label>
<button id="myButton">My Button</button>
</form>
<div id="output-box"></div>
<script src="src/script.js"></script>
</body>
</html>
原文由 bbdev1_9 发布，翻译遵循 CC BY-SA 4.0 许可协议
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答2.3k 阅读✓ 已解决
3 回答2.1k 阅读✓ 已解决
我认为这是 HTML 最烦人的小特性……该按钮必须是“按钮”类型才能不提交。
2019 年 2 月 5 日更新： 根据 HTML 生活标准（以及 HTML 5 规范）：