form表单的默认行为
有如下一段结构:
<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框中按下回车，都不会有页面刷新或者跳转的默认行为了。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！