为何表单内仅有一个按钮能稳定触发JavaScript函数显示消息？

问题现象 #

表单内的按钮点击后，消息有时候刚显示就消失，表现不稳定；而表单外的按钮点击后能稳定显示内容。

核心原因 #

• 表单内的<button>元素默认类型是submit，点击后会触发两个行为：执行绑定的onclick函数，同时触发表单的提交默认行为——浏览器会刷新页面（如果表单没指定提交地址）。
• 你的代码里，myFunction()刚把内容设置到demo元素里，紧接着页面刷新，新设置的内容被重置，所以看起来像是“不稳定”（实际是瞬间显示后被清空）。
• 表单外的按钮不属于任何表单，没有提交页面的默认行为，所以设置的内容能一直保留。

解决办法 #

方法1：阻止表单的默认提交行为

修改函数，添加阻止默认行为的逻辑，同时调整表单的onsubmit绑定：

function myFunction(e) {
  document.getElementById("demo").innerHTML = "Hello Dear Visitor!";
  // 阻止表单提交的默认行为
  if (e) e.preventDefault();
  return false;
}

对应的HTML修改：

<form onsubmit="return myFunction(event)">
  <p>表单内的按钮现在可以稳定显示结果了</p>
  <input type="submit" class="buton" value="Submit" onclick="myFunction(event)">
  <button onclick="myFunction(event)">表单内按钮</button>
</form>

方法2：修改按钮类型为button

给表单内的<button>添加type="button"，让它失去提交表单的默认功能：

<form onsubmit="myFunction()">
  <p>表单内的按钮现在可以稳定显示结果了</p>
  <input type="submit" class="buton" value="Submit" onclick="myFunction()">
  <button type="button" onclick="myFunction()">表单内按钮</button>
</form>

如果不需要<input type="submit">的提交功能，也可以把它改成type="button"。

方法3：移除不必要的表单提交绑定

如果这个表单根本不需要提交数据，直接删掉表单的onsubmit属性，同时把按钮都改成type="button"，彻底避免提交行为：

<form>
  <p>表单内的按钮现在可以稳定显示结果了</p>
  <input type="button" class="buton" value="Submit" onclick="myFunction()">
  <button type="button" onclick="myFunction()">表单内按钮</button>
</form>

内容的提问来源于stack exchange，提问作者user2279628