开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

社区首页 >专栏 >from 阻止表单的默认提交事件

from 阻止表单的默认提交事件

kirin

发布于 2020-11-19 10:17:03

2.1K0

发布于 2020-11-19 10:17:03

举报

文章被收录于专栏：Kirin博客

一、将input 标签的type属性从type=”submit”改为type=“button”

二、将input标签改为button标签

三、在事件中添加event.preventDefault()

四、用onclick点击事件来return false

注意是onclick内是return func();而不是简单的调用func()函数

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>Document</title>
<script>
function func(){
return false;
}
</script>
</head>
<body>
<form action=“”>
<input type=“submit” value=“button” onclick=“return func()” />
<!–注意是onclick内是return func();而不是简单的调用func()函数–>
</form>
</body>
</html>

五、利用表单的onsubmit事件

注意：onsubmit事件的作用对象为<form>，所以把onsubmit事件加在提交按钮身上是没有效果的。

form对象的onsubmit事件类似onclick,都是先处理调用的函数，再进行表单是否跳转布尔值的判断

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>Document</title>
<script>
function func(){
return false;
}
</script>
</head>
<body>
<form action=“” onsubmit=“return func()”>
<input type=“submit” value=“button” />
</form>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/11/18 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

0 条评论

热度

最新

LV.

目录

一、将input 标签的type属性从type=”submit”改为type=“button”
二、将input标签改为button标签
三、在事件中添加event.preventDefault()
四、用onclick点击事件来return false
五、利用表单的onsubmit事件