• 使用事件的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>
    

      

     
  • 相关阅读:
    Hdu 1429 胜利大逃亡(续) (bfs+状态压缩)
    Vijos 1456 最小总代价 (状压dp)
    洛谷 P1313 计算系数 (二项式定理)
    洛谷 P1134 阶乘问题
    EINTR错误
    TCP和UDP协议的应用/参数查看
    BAT面经
    高级环境编程要看的
    UDP丢包和无序 问题的解决方法
    tcp/ip
  • 原文地址:https://www.cnblogs.com/max-hou/p/9057313.html
Copyright © 2020-2023  润新知