如何阻止<a>标签默认行为和表单提交
阻止<a>标签默认行为
- 方式一 (通过return false)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阻止事件的默认行为</title>
<script type="text/javascript">
window.onload = function() {
var a = document.getElementById('mya');
a.onclick = function() {
alert(this.innerHTML);
/*通过return false; 实现阻止了点击a标签后,页面的跳转*/
return false;
}
}
</script>
</head>
<body>
<a href="http://www.baidu.com" id="mya">百度一下</a>
</body>
</html> - 方式二 (通过javascript:; 或者 javascript:void(0);)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阻止事件的默认行为</title>
<script type="text/javascript">
window.onload = function() {
var a = document.getElementById('mya');
a.onclick = function() {
alert(this.innerHTML);
}
}
</script>
</head>
<body>
<a href="javascript:void(0);" id="mya">百度一下</a> <!--通过javascript:void(0)-->
</body>
</html> 表单提交
- 方式一 submit提交不验证
<form action="/index">
<input type="text" />
<input type="submit" value="提交"/>
</form>- 列表项目
阻止表单提交
有2种方式：
第一种：<form>提交事件第二种：提交按钮
- <form> 提交事件
// 不推荐，写法不优雅
<form onsubmit="go(event)"></form>
<script>
function go(e){
e.preventDefault();
}
</script>// 不推荐，因为无法对表单数据进行验证
<form action="/register" method="post" onsubmit="return false;"></form>// 推荐写法
<form action="/register" method="post">
<input type="text" name="username" placeholder="请输入注册用户名"><br />
<input type="password" name="pwd" placeholder="请输入初始密码"><br />
<input type="password" name="aginpwd" placeholder="请再次输入密码"><br />
<input type="submit" value="注册" class="login_btn">
</form>
<script>
var form = document.forms[0],
submit = document.querySelector(".login_btn"),
inputBtn = document.getElementsByTagName("input");
form.onsubmit = function(e) {
e.preventDefault();
// return false; 也可以阻止表单提交
}
</script>- 提交按钮
<input type="submit"/>
// 不推荐，因为无法对表单数据进行验证
<form action="/register" method="post">
<input type="text" name="username" placeholder="请输入注册用户名"><br />
<input type="password" name="pwd" placeholder="请输入初始密码"><br />
<input type="password" name="aginpwd" placeholder="请再次输入密码"><br />
<input type="submit" value="注册" class="login_btn" onclick="return false">
</form>// 不推荐，写法不优雅
<form action="/register" method="post">
<input type="text" name="username" placeholder="请输入注册用户名"><br />
<input type="password" name="pwd" placeholder="请输入初始密码"><br />
<input type="password" name="aginpwd" placeholder="请再次输入密码"><br />
<input type="submit" value="注册" class="login_btn" onclick="nogo(event);">
</form>
<script>
function nogo(e){
e.preventDefault();
}
</script>// 推荐写法
<form action="/register" method="post">
<input type="text" name="username" placeholder="请输入注册用户名"><br />
<input type="password" name="pwd" placeholder="请输入初始密码"><br />
<input type="password" name="aginpwd" placeholder="请再次输入密码"><br />
<input type="submit" value="注册" class="login_btn">
</form>
<script>
var form = document.forms[0],
submit = document.querySelector(".login_btn"),
inputBtn = document.getElementsByTagName("input");
submit.onclick = function(e){
e.preventDefault();
// return false; 也可以阻止表单提交
}
</script>- 提交按钮
<button>注册</button>
// 不推荐，因为无法对表单数据进行验证
<form action="/register" method="post">
<input type="text" name="username" placeholder="请输入注册用户名"><br />
<input type="password" name="pwd" placeholder="请输入初始密码"><br />
<input type="password" name="aginpwd" placeholder="请再次输入密码"><br />
<button onclick="return false">注册</button>
</form>// 不推荐，写法不优雅
<form action="/register" method="post">
<input type="text" name="username" placeholder="请输入注册用户名"><br />
<input type="password" name="pwd" placeholder="请输入初始密码"><br />
<input type="password" name="aginpwd" placeholder="请再次输入密码"><br />
<button onclick="nogo(event);">注册</button>
</form>
<script>
function nogo(e){
e.preventDefault();
}
</script>// 推荐写法
<form action="/register" method="post">
<input type="text" name="username" placeholder="请输入注册用户名"><br />
<input type="password" name="pwd" placeholder="请输入初始密码"><br />
<input type="password" name="aginpwd" placeholder="请再次输入密码"><br />
<button class="login_btn" onclick="nogo(event);">注册</button>
</form>
<script>
var form = document.forms[0],
submit = document.querySelector(".login_btn"),
inputBtn = document.getElementsByTagName("input");
submit.onclick = function(e){
e.preventDefault();
// return false; 也可以阻止表单提交
}
</script>如何阻止<a>标签默认行为和表单提交的更多相关文章
- DWZ框架Ajax无刷新表单提交处理流程
DWZ框架Ajax无刷新表单提交处理流程是: 1. ajax表单提交给服务器 2. 服务器返回一个固定格式json结构 3. js会调函数根据这个json数据做相应 ...
- js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- 防止表单提交时刷新页面-阻止form表单的默认提交行为
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
- 解决MUI阻止a标签默认跳转事件—方法总结
用过mui的小伙伴们一定不会陌生,有时候真的很烦mui本身会阻止a标签默认跳转.一般只要用了mui的ui组件,比如头部,底部或者弹框,你就不能在用a标签进行跳转了. 注:项目中引用了mui后,可能也会 ...
- form表单提交和阻止
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS_简介/语法结构/长度单位/应用方式/标签的样式重置/表单样式重置
一.CSS简介: w3c(World Wide Web Consortium):万维网联盟,是规定网页标准的一个组织(叫做Web标准) Web标准:是由w3c和其他标准化组织制定的一系列标准的集合, ...
- JQuery阻止表单提交的方法总结 - 使用onsubmit()验证表单并阻止非法提交
方法1:<form onsubmit="javascript:confirm()"> 方法内返回false阻止表单提交 示例:代码检测textarea内填写的长度,未填 ...
- 阻止form表单提交的问题
阻止form表单提交这种场景可能在生活中,我们经常碰到,而在我们第一印象里面可能我们用return false 去阻止表单默认行为. 但是,有中情况我们用return false 不能阻止表单提交 & ...
- vue---阻止默认表单提交的三种方法
vue在做表单提交的时候,需要用到一些自定义的验证规则,这个时候就需要阻止表单默认的提交方式. 方法一:直接阻止 <form id="form" @submit=" ...
随机推荐
- JS中常用的语法
在做前端中,JS的语法尤为重要..没有它,就没有你的未来吧.. 下面将一些常用的JS语法给大家罗列出来.. 也给自己备份一下.. 以备不时之需.. 1.输出语句:document.write(&quo ...
- 记日杂-log4net组件使用
下面我给大家介绍一下记日杂-log4net组件使用,当程序发布有服务器上,有时出现了错误, 都不知道出现在那,所以log4net组件很好解决这个问题. 1.添加开发包,并对log4net.dll的引用 ...
- Android UI组件：布局管理器
为了更好的管理Android应用的用户界面中的组件,Android提供了布局管理器.通过使用布局管理器,Android应用的图形用户界面具有良好的平台无关性.通常,推荐使用布局管理器来管理组件的分布. ...
- PAT B1031 查验身份证（15）
AC代码 #include <cstdio> #include <iostream> using namespace std; const int max_n = 110; / ...
- crontab中的%
crontab中的%是换行的意思,在使用时需要使用\做转义. ----------------- 在用crontab执行一段定时任务时,想要把数据输出到一个日期命名的文件中 * * * * * cd ...
- Boot-crm管理系统开发教程(二)
ps:昨天将管理员登录的功能完成了,并完美的解决跳过登录从而进入管理界面的bug,今天我们将实现"查询用户"功能. ①在po包中创建Customer类,并编写相关变量和添加set/ ...
- 安装calico
安装docker:https://www.cnblogs.com/cjsblogs/p/8717304.html 安装etcd集群:https://www.cnblogs.com/cjsblogs/p ...
- Hyperledger Fabric-sdk-java
Hyperledger Fabric-sdk-java 2018年04月18日 23:36:02 l_ricardo 阅读数 975更多 分类专栏: 区块链 java 版权声明:本文为博主原创文章 ...
- webpack自定义loader并发布
一.官网对loader的解释: 1.loader 是导出为一个函数的 node 模块.该函数在 loader 转换资源的时候调用.给定的函数将调用 loader API,并通过 this 上下文访问. ...
- 7-Perl 数组
1.Perl 数组Perl 数组一个是存储标量值的列表变量,变量可以是不同类型.数组变量以 @ 开头.访问数组元素使用 $ + 变量名称 + [索引值] 格式来读取,实例如下:#!/usr/bin/p ...