如何阻止<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=" ...
随机推荐
- nRF5 SDK Bootloader and DFU moudles(3)
DFU控制点特性用于控制DFU过程的状态. 通过写入该特征来请求所有DFU程序. 标记过程结束的响应将作为通知收到. BLE传输 Transfer of an init packet DFU控制器首先 ...
- python pip换源方法
以下资料来源于网络: pip国内的一些镜像 阿里云 http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 https://pypi.mirrors.ust ...
- [转帖] 龙芯 中标麒麟的 源 以及K8S
龙芯Mips64el平台上部署K8s https://ysicing.me/posts/mips64el-loongson-k8s/ YSICING May 29 2019 kubernetes ...
- 【Python】【基础知识】【内置函数】【print的使用方法】
原英文帮助文档: print(*objects, sep=' ', end='\n', file=sys.stdout, flush=False) Print objects to the text ...
- Hadoop_常用命令（hdfs上）
Hadoop_常用命令(hdfs上) hadoop fs所有文件系统都可以使用 hdfs dfs仅针对于hdfs文件系统 - 1 - 查看所有目录(文件夹)及文件 hdfs dfs -ls / - ...
- Linux就该这么学——初识管道符
初识管道命令符 管道命令符本质(就是一个“任意门”) 把前一个命令原本要输出到屏幕的标准正常数据当做是最后一个命令的标准输入 格式 : “命令A | 命令B | ...” 示例 : 1.找出被限制登录 ...
- Vue用递归实现一个消除输入框表情符的自定义directive
最近项目中有一个需求,所有的文本输入框需要过滤掉表情符号,但是觉得每次表单验证的时候去判断,有点麻烦.于是我想到了自定义一个指令,后续遇到需要删除表情符号的输入框,直接通过指令将表情符号删除就好了,方 ...
- asp.net 1.HTTP协议
1.概念 协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则,超文本传输协议(HTTP)是一种通信协议,它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器. ...
- C# 操作地址 从内存中读取写入数据(初级)
本示例以植物大战僵尸为例, 实现功能为 每1秒让阳光刷新为 9999.本示例使用的游戏版本为 [植物大战僵尸2010年度版], 使用的辅助查看内存地址的工具是 CE. 由于每次启动游戏, 游戏中阳光 ...
- js循环遍历性能
定length for循环 (有length) 不定length for循环(使用数组length) 不定length for循环(判断数组length是否存在) forEach(Array自带,对某 ...