前端button按钮点击会自动刷新页面

Posted 2023-05-04

参考技术A ps：这是我刚开始求职遇到的一个面试题，居然我不会，丢人。。

原因：<button></button>如果不设置type属性，在IE浏览器下默认type值为"button"，其他浏览器默认type为"submit",点击便会提交表单，刷新页面

解决办法：

1.手动设置type="button"，<button type="button"></button>

2.在按钮的点击事件处理函数中取消默认事件，

    <button id="button"></button>

    document.getElementById("button").onclick=function(e)

        e.preventDefult();

    

3.使用input，设置type = "button"

<input type="button" />

解决button按钮点击会刷新页面以及触发表单BUG

项目场景： 问题描述：

表单点击添加一行

<button @click="addSpecGrid(index)">生成</button>

---

发现点击的时候会触发表单的判断以及偶尔会刷新页面，导致表单里面填写过得内容情况

---

原因分析：

button标签按钮会提交表单，而input标签type属性为button不会对表单进行任何操作。

---

解决方案：

button标签换成input标签即可解决

<input type="button"  @click="addSpecGrid(index)" value="生成"/>