2

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

104828720
1.4k 声望222 粉丝

编程其实很枯燥,所以一定要有追求。


下一篇 »
Git Q&A