阻止<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>标签默认行为和表单提交的更多相关文章

  1. DWZ框架Ajax无刷新表单提交处理流程

    DWZ框架Ajax无刷新表单提交处理流程是: 1.       ajax表单提交给服务器 2.       服务器返回一个固定格式json结构 3.       js会调函数根据这个json数据做相应 ...

  2. js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  3. 防止表单提交时刷新页面-阻止form表单的默认提交行为

    最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...

  4. 解决MUI阻止a标签默认跳转事件—方法总结

    用过mui的小伙伴们一定不会陌生,有时候真的很烦mui本身会阻止a标签默认跳转.一般只要用了mui的ui组件,比如头部,底部或者弹框,你就不能在用a标签进行跳转了. 注:项目中引用了mui后,可能也会 ...

  5. form表单提交和阻止

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. CSS_简介/语法结构/长度单位/应用方式/标签的样式重置/表单样式重置

    一.CSS简介:  w3c(World Wide Web Consortium):万维网联盟,是规定网页标准的一个组织(叫做Web标准) Web标准:是由w3c和其他标准化组织制定的一系列标准的集合, ...

  7. JQuery阻止表单提交的方法总结 - 使用onsubmit()验证表单并阻止非法提交

    方法1:<form onsubmit="javascript:confirm()"> 方法内返回false阻止表单提交 示例:代码检测textarea内填写的长度,未填 ...

  8. 阻止form表单提交的问题

    阻止form表单提交这种场景可能在生活中,我们经常碰到,而在我们第一印象里面可能我们用return false 去阻止表单默认行为. 但是,有中情况我们用return false 不能阻止表单提交 & ...

  9. vue---阻止默认表单提交的三种方法

    vue在做表单提交的时候,需要用到一些自定义的验证规则,这个时候就需要阻止表单默认的提交方式. 方法一:直接阻止 <form id="form" @submit=" ...

随机推荐

  1. python库 使用shutil来删除文件夹时报PermissionError时的解决方案

    解决方案: def handle_remove_read_only(func, path, exc): excvalue = exc[1] if func in (os.rmdir, os.remov ...

  2. mysql innodb索引原理

    聚集索引(clustered index) innodb存储引擎表是索引组织表,表中数据按照主键顺序存放.其聚集索引就是按照每张表的主键顺序构造一颗B+树,其叶子结点中存放的就是整张表的行记录数据,这 ...

  3. Spring MVCD框架中调用HanLP分词的方法

    项目简要:关于java web的一个项目,用的Spring MVCd 框架.鉴于参与此次项目的人中并不是所人都做的Spring,为了能够提高效率,建议大家是先抛开SPring来写自己负责的模块,最后再 ...

  4. sql 循环转移备份数据

    --创建表结构 select top 1 * into ATable_20190710 from ATable --转移表数据 insert into ATable_20190710 select t ...

  5. 数据排序 sort

    排序命令: 常和管道进行协作的命令  -sort  (默认使用字符的第一个字符进行排序) -n  按数字排序 -r  反序排序 -o  结果 输出到文件 -t  分隔符 (sort -n -t &qu ...

  6. STL algorithm 头文件下的常用函数

    algorithm 头文件下的常用函数 1. max(), min()和abs() //max(x,y)和min(x,y)分别返回x和y中的最大值和最小值,且参数必须时两个(可以是浮点数) //返回3 ...

  7. Python 常用单词

    Python常用单词(英文好的人自动忽略) 单词 发音 翻译 作用 print 普润特 打印 显示我们想要查看的内容 input 因普特 输入 获取用户输入的一些内容 int 印特 整型 将有引号的数 ...

  8. python函数篇0-2

    函数的有三中不同的参数: 普通参数 默认参数 动态参数# ######### 定义函数 ######### # name 叫做函数func的形式参数,简称:形参def func(name):    p ...

  9. mybatis调用java类

    在mybatis的映射xml文件调用java类的方法: 使用的是OGNL表达式,表达式格式为:${@prefix@methodName(传递参数名称)} 1.如下代码所示:方法必须为静态方法:以下我只 ...

  10. PMP - 控制图(质量控制工具)

    这里用一个具体例子来解释什么是控制图. 假设现在工厂需要生成直径为1000mm (允许偏差为振幅4个标准差,即:±4mm)的螺丝钉.我们要如何保证生成过程的质量呢? 这时候我们应该对生成出来的产品进行 ...