表单button按钮不绑定提交事件自动提交

表单button按钮不绑定提交事件自动提交

---

前言

在使用layui前端框架时，在form表单中添加了两个按钮，一个用来提交，一个绑定了下载事件，但是当我点击下载按钮时，竟然提交了。接下来我就讲讲是什么原因。

1.代码如下

<button id = "downStuff" class = "layui-btn layui-btn-xs">下载查看</button>

2.原因解释以及解决方案

1.button在没有添加type类型时，button的默认类型为submit，可以通过声明式添加type="button"防止表单提交

<button id = "downStuff" type = "button" class = "layui-btn layui-btn-xs">下载茶禅</button>

2.可以将button标签用a标签代替，代码如下

<a class="layui-btn layui-btn-xs">下载查看</a>