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博客