HTML : form 下的 button

因为之前对表单做提交都是大多采用 Submit 方式，没有通过给按钮添加监听事件的方式进行表单的处理。结果被一个 Button 搞的怀疑人生。举个例子：

<form action="/action">
    <button id="btn" >text</button>
</form>

//按钮
var Btn = doc.getElementById('btn');
//按钮点击事件
Btn.addEventListener('click', function(event) {
    alert("CLICK"); 
});

点击按钮就会出现这样一种情况，明明按钮的点击事件中没有进行提交，应该只会弹出一个提示。但是这个表单会进行提交。为什么？
查找资料发现：
type 属性：规定按钮的类型。
提示：请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”。
真的是坑啊，也怪自己基础不大好。
所以解决办法很明显，如果按钮的作用不是为了提交表单的话，给其加上type属性就行了：

<form action="/action">
    <button id="btn" type="button">text</button>
</form>

HTML : form 下的 button

相关推荐