是这样的，这学期学校安排了 JSP 的课程，就是那个在 HTML 里面嵌入 JAVA 的语言。然后今天在做实验的时候，对于实验报告上的拓展——利用 JavaScript 阻止表单提交，我一看就来劲了，用到 JS 了，我这可不就得施展一番”拳脚“，哈哈哈哈哈，开玩笑的。然后就有了一点发现。
1.表单正常提交
咱们都知道在 form 表单里面，点击 type 为 submit 的按钮，就会提交表单，当然，一个普通的 button 标签也会被当作提交按钮来使用。我们来做一个测试，看下面的代码
<form action="show.html">
<input type="text" name="username" id="username">
<input type="password" name="password" id="password">
<input type="submit" value="提交按钮" id="submit" >
</form>
正常情况下，咱们点击按钮，页面就会跳转到 show.html,咱现在也不管这页面能否接收，主要是通过测试页面跳转的来验证是否阻止成功。
2. 阻止表单提交
阻止表单提交的方式我想到两种,查资料的时候，见到了第三种
- 一种是利用 event 的阻止默认事件机制
event.preventDefault() - 给提交按钮绑定函数，函数内
return false - 利用
form的onsubmit事件
原生 JS 绑定事件的方式也有几种，为了记录方便，我给它们分别命名方法123
- 获取元素，然后
element.onclick = function ..... - 获取元素，然后利用
addEventListener监听 - 直接在标签里面
<button onclick="check()"></button>
接下来我会逐个测试，也就能从中 Find 我的发现了。
2.1 利用 event
- 方法1
<script>
const submit = document.getElementById("submit")
function check(e){
e.preventDefault()
}
submit.onclick = check
</script>
结果很理想，阻止成功，页面不跳转
- 方法2
<script>
const submit = document.getElementById("submit")
function check(e){
e.preventDefault()
}
submit.addEventListener("click",check)
</script>
结果也很理想，阻止成功，页面不调整
- 方法3
<script>
function check(event){
event.preventDefault()
}
</script>
<form action="show.html">
<input type="text" name="username" id="username">
<input type="password" name="password" id="password">
<input type="submit" value="提交按钮" id="submit" onclick="check()" >
</form>
好家伙，跳转的毫不犹豫，但是呢细心的我发现，这种写法是不能通过默认参数获取到 event 对象的，所以呢，可以像下面这么写哦
<script>
function check(e){
let event = e || window.event
event.preventDefault()
}
</script>
<form action="show.html">
<input type="text" name="username" id="username">
<input type="password" name="password" id="password">
<input type="submit" value="提交按钮" id="submit" onclick="check()" >
</form>
2.2 return false
- 方法1
<script>
const submit = document.getElementById("submit")
function check(){
return false
}
submit.onclick = check
</script>
不跳转，成功
2.方法2
<script>
const submit = document.getElementById("submit")
function check(){
return false
}
submit.addEventListener("click",check)
</script>
页面跳转，阻止失败
- 方法3
<script>
function check(){
return false
}
</script>
<form action="show.html">
<input type="text" name="username" id="username">
<input type="password" name="password" id="password">
<input type="submit" value="提交按钮" id="submit" onclick="check()" >
</form>
页面跳转，阻止失败
2.3 利用 onsubmit
函数里面 return false 就不会跳转了，但是要注意，要写成 return check() 这种哦
<form action="show.html" onsubmit="return check()">
<input type="text" name="username" id="username">
<input type="password" name="password" id="password">
<input type="submit" value="提交按钮" id="submit" >
</form>
<script>
function check(){
return false
}
</script>
页面不跳转，阻止成功
3.总结
给上述实验写个结论，也就是说，利用 event 并且是在标签内绑定事件的话，要用 window.event 获取事件对象，使用 return false 来阻止的话，在标签里面绑定事件以及使用 addEventListener ，都是不管用的，只能用 element.onclick = function ... 这种形式。但是我总感觉 return false 这种应该不管如何绑定都是行得通的，不知道要咋子搞，知道的小伙伴救救我吧！！！
