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

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

但是

如果我们把它放到了一个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去掉

然后呢

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

最后更新于