如何阻止<a>标签默认行为和表单提交

最新推荐文章于 2021-08-04 17:09:14 发布

weixin_33812433

最新推荐文章于 2021-08-04 17:09:14 发布

阅读量577

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000013368932

版权

阻止<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>

weixin_33812433

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何阻止<a>标签默认行为和表单提交

阻止<a>标签默认行为方式一 (通过return false)<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>阻止事件的默认行为&lt...
复制链接

扫一扫

如何阻止<a>标签默认行为和表单提交

阻止<a>标签默认行为

表单提交

阻止表单提交

“相关推荐”对你有帮助么？