form表单中的button自动刷新页面问题

Posted 2020-11-23 yanggb

form表单中如果存在button的话，有可能会出现一个问题：点击button，触发了页面的自动刷新事件。

原因是因为<button>标签默认的类型是submit，即默认的button点击就会触发表单的提交事件。

<button></button>
<!-- 两者是相当的 -->
<button type="sumbit"></button>

解决的办法有三个。

1.在<button>标签中添加属性type="button"。

<button type="button"></button>

2.将<button>标签改为<input>标签。

<input type="button" />

3.在button的点击事件中加入阻止默认事件执行的代码段（javascript/jQuery）。

$(‘button‘).on(‘click‘, function(e) {
    e.preventDefault();
});

另外，其实现在一般是不建议使用button标签的，而是使用a标签做按钮，一个是样式的定制问题，一个就是上面的问题。 

 

"人最强大的时候，不是坚持，而是放下。"