form 阻止表单的默认提交事件 - click 单击事件能够触
2019-08-23 本文已影响0人
端木安玉
form 阻止表单的默认提交事件 - click 单击事件能够触发
近日 遇到个需求 用 form 的button 提交功能 可是 总是被form的默认提交事件 提交 而点击事件无法触发 ，一通百度 方法都不行 个人代码如下
<form action="">
<input type="text" id="username" placeholder="请输入您的称呼" />
<input type="text" id="mobile" placeholder="请输入您的联系方式" />
<button id="t3" type="button">立即预约</button>
</form>
$("#t3").on("click",function(){
alert(21);
})
注：
1--- button 的 type属性要用 “button”
2--- form 的 action属性要用 “”
结果
点击（click）事件能够触发，form 默认提交事件 没有触发
网上 方法一 preventDefault()方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function func(event){
event.preventDefault();
}
</script>
</head>
<body>
<form action="">
<input type="submit" value="button" οnclick="func(event)" />
</form>
</body>
</html>
方法二：表单的onsubmit事件
注意：onsubmit事件的作用对象为<form>，所以把onsubmit事件加在提交按钮身上是没有效果的。
form对象的onsubmit事件类似onclick,都是先处理调用的函数，再进行表单是否跳转布尔值的判断
οnsubmit="return true" 为默认的表单提交事件
οnsubmit="return false"为阻止表单提交事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function func(){
return false;
}
</script>
</head>
<body>
<form action="" οnsubmit="return func()">
<input type="submit" value="button" />
</form>
</body>
</html>
