阻止<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. Linux正则表达式题型

    1.将下面的/etc/passwd所有行的第一列和最后一列相互调换位置. 解答: 1)使用sed的后向引用 2)awk -F ":" '{print $7":" ...

  2. arm-linux的gdb移植

    转载于:http://blog.chinaunix.net/uid-23381466-id-309369.html arm-linux的gdb移植分为两种情况.一种是交叉调试版.这一种模式是需要编译一 ...

  3. Mf175-用户注册功能-埋点敏捷方案

    在不了解埋点系统的情况下,花了五六个小时 帮一位PM朋友做的方案.记录下来.以备后续参考 Mf178-用户注册功能-埋点敏捷方案 版本号 时间 撰写人 描述 V1.0 20190515-10:50:0 ...

  4. Linux就该这么学——新手必须掌握的命令之文件编辑命令组

    cat 命令 用途 : 用于查看纯文本文件 格式 : cat [选项] [文件] 示例 : more 命令 用途 : 用于查看纯文本文件(内容较多的),可以用”Enter” 键或者”Space”键向下 ...

  5. python中全局global和局部nonlocal命名空间

    python中全局global和局部nonlocal命名空间 局部名称空间对全局名称空间的变量可以引用,但是无法改变. count = 1 def func1(): count = 2 print(c ...

  6. URL去重与文章去重的一些基本方法

    一.url去重url存到数据库所有url放到set中(一亿条占用9G内存)md5之后放到set中(一亿条占用2,3G的内存)scrapy采用的就是类似方法bitmap方法(url经过hash后映射到b ...

  7. T100——读取系统程序临时表数据

    SELECT   * FROM   USER_OBJECTS ORDER  BY  CREATED DESC SELECT   * FROM   USER_OBJECTS WHERE  OBJECT_ ...

  8. Java多线程（二）：Thread类

    Thread类的实例方法 start() start方法内部会调用方法start方法启动一个线程,该线程返回start方法,同时Java虚拟机调用native start0启动另一个线程调用run方法 ...

  9. JSON函数表

    jsoncpp 主要包含三个class:Value.Reader.Writer.注意Json::Value 只能处理 ANSI 类型的字符串,如果 C++ 程序是用 Unicode 编码的,最好加一个 ...

  10. 18-Perl 错误处理

    1.Perl 错误处理程序运行过程中,总会碰到各式各样的错误,比如打开一个不存在的文件.程序运行过程中如果出现错误就会停止,我们就需要使用一些检测方法来避免错误,从而防止程序退出.Perl 提供了多中 ...