点击button自动刷新页面的奇葩错误

以前在写练习的时候遇到过这样一个问题,自己在html中写了一个button

<button>test1</button>

在没有给其附上onclick事件时是点击是不会有任何反应的 
但是把这个button放入from表单时

<form action="testAction" method="psot">
    <button>test1</button>
</form>

无论有没有给button附上事件,点击后页面都会刷新 
查找了半天资料网上有说是不是事件写错了或者是js冲突啊之类的问题,在确认了自己的所有方法没有写错之后,按照那些教程改了之后依旧没有解决,那么出现这种错误就不是冲突的问题



后来将button的代码加了一个type属性之后,问题就解决了

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

到这个时候才发现自己犯了一个很弱智的问题,<button> 标签有一个默认的属性是type="submit" 等于说如果你不自己手动覆盖的话,每一个默认写的button都是起到submit的作用,自然页面就会刷新。当加上type="button" 后,button就变为了一个普通的按钮,需要加上onclick事件才会有相应的反应了。 
虽然只是一个微不足道的小bug,但对html不熟的我来说确实是修改了很长一段时间,所以特此记录下来,以防以后遇到相同的坑

原文地址:https://www.cnblogs.com/Pinapple/p/9590742.html