form标签导致点击button页面被清空

• 抖音：https://v.douyin.com/ieF5TtK5/

• B站：https://www.bilibili.com/video/BV1nh4y1N7jh/

注意看啊这是一个很普通的按钮

但是

如果我们把它放到了一个form表单里边

注意看像这样

我再次点击它的时候呢注意啊… 大家看！

它就会变成了一个提交按钮

我们可以再加一个按钮来验证一下

button2 然后呢我们再写一个input（输入框）

注意看这里面写点东西

button2没问题，但是button1呢

大家看就刷新了

所以啊

像这种button标签它也是有type的

我们把它type写成button

大家看我们再来试试

大家看这样就可以了

如果我们不写呢

其实就像以前的input type=submit一样

好最后咱们再来看

有小伙伴发来的bug啊

他写了一个简单的生成这个

渐变代码的工具

然后点这个复制代码

他就出bug了

大家看代码是复制了

但是呢

页面刷新了

其实原因就是因为他把这个button

放在了一个form表单里

那我们除了在这加一个type="button"

还有什么方法吗

大家看现在是type等于button

这样就可以了

其实还有一个方法

就是前面这个按钮它没有问题

原因是什么呢

它在前面这个按钮的点击事件里

第一句加了一个event.preventDefault()

有了这个它就会阻止原生的那个事件

所以呢我们在第二个

按钮的点击方法里也加一个

我们先在这加一个event接收一下

好然后再加一个

我们再把原声的这个type=button去掉

好

然后呢

生成一个，这回复制，注意~ 也没有问题了