zoukankan      html  css  js  c++  java
  • 使用事件的preventDefault()方法改变默认行为

    事件有属性,还有方法,还有事件。事件本身是个对象^_^

    事件的preventDefault()方法改变默认行为,在事件发生前阻止,不让其发生。这样的应用场景有很多,常见表单验证,如必填字段不能为空。

    示例1,阻止链接

    <body>
    <p>DOM使用preventDefault()方法,IE5~IE8使用returnValue</p>
    <p><a href="http://www.baidu.com/">去百度</a></p>
    <p><a href="http://www.baidu.com" id="gotobaidu">去百度,将被阻止</a></p>
    
    <script>
        var gotobaidu=document.getElementById("gotobaidu");
    
        gotobaidu.addEventListener('click',stop,false);
    
        function stop(e) {
            if(e.preventDefault){
                e.preventDefault();
            }else{
                window.event.returnValue=false;
            }
        }
    </script>
    </body>
    

     示例2,阻止表单提交

    <body>
    <p>DOM使用preventDefault()方法,IE5~IE8使用returnValue</p>
    
    <form id="myform" action="http://www.baidu.com/" method="get">
    用户名:<input type="text" id="username" name="username">
        <button type="submit">提交</button>
    </form>
    
    <script>
        var myform = document.getElementById('myform');
    
        myform.addEventListener('submit', stop, false);
    
        function stop(e) {
            var username = document.getElementById('username');
            // alert(username.value);
            if (username.value === '') {
                //要求输入内容
                alert("请输入用户名");
                // 阻止
                if (e.preventDefault) {
                    e.preventDefault();
                } else {
                    window.event.returnValue = false;
                }
            }
        }
    </script>
    </body>
    

      

     
  • 相关阅读:
    团队项目成员和题目
    最大联通子数组
    站立会议5
    关于jsp之间href传参(中文)乱码问题
    站立会议4
    典型用户和用户场景描述
    站立会议3
    站立会议2
    站立会议1
    第七周学习进度情况
  • 原文地址:https://www.cnblogs.com/max-hou/p/9057313.html
Copyright © 2011-2022 走看看