解决button绑定事件onclick点击刷新页面

2022/04/14更新：

直接将button标签的type属性改为button即可。

----------------------------------------------------------

发现问题先百度找到了一篇文章：

今天遇到一个特别奇怪的事，在页面中使用button标签，添加了点击事件onclic，点击的时候倒是执行了绑定的方法，但页面被刷新了！

　　什么鬼？我没与提交表单啊！

　　原来，button默认具有提交表单的动作！！！

　　咔嚓！这是哪个货设计的？要想避免button绑定事件同时会提交表单，有以下方法：

1，不使用button，使用<input type='button' />来代替，由于input标签为单标签，中间不能加东西，所以尽量使用span和label来取代button。

2，在onclick绑定的函数中，开头添加e.preventDefult()，阻止默认提交表单的行为。

参考文章：点击button后刷新了页面 - 光何 - 博客园

然后把e.preventDefult()放进onclick的方法里，发现报错

接着百度，找到这篇文章，和这串代码：

if ( e && e.preventDefault ){
         e.preventDefault(); //阻止默认浏览器动作(W3C) 
    }else {
        window.event.returnValue = false; //IE中阻止函数器默认动作的方式 
}

把这串代码放进方法里，前面后面都行

参考文章：【JS基础】e.preventDefault() 阻止默认操作_Milk595的博客-CSDN博客_e.preventdefault()

接着看到了这篇文章的解释：

有的时候我们会为事件回调函数添加一个参数（通常是e），并在函数中加入e.preventdefault()；以取消默认行为。由于习惯，我顺手将它写到了一个checkbox的change事件中。由于不同的浏览器解释不同，在IE8上出现了一个bug：change事件能进入，但是UI显示上不能讲复选框的选中状态重绘。

分析原因，是我的e.preventdefault()阻止了状态重绘。去掉后，就好了。

e.preventdefault()会阻止什么：

checkbox 、radio的状态变化(并非所有浏览器)。

a标签的跳转

表单的提交

参考文章：e.preventdefault()别滥用_君君啊�的博客-CSDN博客

至此解决问题