有如下一段结构:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="form_test" action="/myurl" method="post" >
用户名：<input type="text" value="" id="username"/>
密 码：<input type="text" value="" id="password"/>
<button id="submit_btn">提交</button>
</form>
</body>
</html>
浏览器显示：
注意一点:我没有给button指定type类型，很多人觉得语义化的button标签其实就是type=“button”,这是错误的！！！
行为一：
当我点击提交，页面发生了跳转，跳转的url是我在form标签中action属性定义的url！所以：表单中的button标签默认类型是submit
行为二：
当在用户框或者密码框中得到焦点后，我按下回车。浏览器也发生了像行为一那样的跳转。
表单中会自动注册回车提交事件，并且IE中表现一致 。现在在项目中绝大多数都是用ajax提交表单，没必要在form的action中填写url，还是刚才的DOM结构只是去掉了action属性(容易被忽略的)
在刚在的DOM结构下加下面这段js代码：
var submit_btn = document.querySelector("#submit_btn")
submit_btn.onclick = function(e) {
debugger
// e.preventDefault();
console.log('submit_btn')
}
页面跑起来时会发现代码的执行进入了这个按钮点击事件，执行了里面的代码，然后页面再去跳转到form表单中的action地址
行为三：
当未指名form action 属性和button type类型，会先触发自定义按钮事件然后表单请求事件（表单又重新刷新了一遍）
我们把form标签中的action属性去掉然后点击提交按钮，发现代码也是进入按钮事件绑定的事件处理函数，只是最后没有去跳转url而是页面进行了刷新。
阻止form表单的默认行为
阻止form表单的默认行为说白了就是阻止以上3中行为的一个共同表现：阻止页面的跳转与刷新
方式一：解决点击没有设置type属性的按钮的默认行为
1、在button按钮加上type属性，属性值选择不是submit
2、在button的事件处理函数中加入阻止默认行为的语句。代码如下：
submit_btn.onclick = function(e) {
e.preventDefault();//阻止默认行为
console.log('submit_btn')
}
方式二：解决input框按回车键得默认行为
在form表单的onsubmit事件中加入阻止默认行为的语句。代码如下：
form_test.onsubmit = function(e) {
e.preventDefault();
console.log('123')
}
方式三：在form标签下加入onsubmit = "return false"的属性。
<form id="form_test" action="/myurl" method="post" onsubmit="return false" >
用户名：<input type="text" value="" id="username"/>
密 码：<input type="text" value="" id="password"/>
<button id="submit_btn" type="button">提交</button>
</form>
这样操作后，我们点击未设置type属性的button按钮，或者在input框中按下回车，都不会有页面刷新或者跳转的默认行为了。
2185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
