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

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标签做按钮,一个是样式的定制问题,一个就是上面的问题。 

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

原文地址:https://www.cnblogs.com/yanggb/p/11269314.html