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>
    

      

     
  • 相关阅读:
    单链表的基本操作(查找,插入,删除)
    线性表的基本操作(插入,删除,查找)
    双人五子棋对战(需要EasyX图像库)
    2016ACM竞赛训练暑期课期末考试 a题
    百练_1664 放苹果
    百练_4120 硬币(DP)
    PAT_1046 划拳
    PAT_1026 程序运行时间
    学Android开发 这19个开发工具助你顺风顺水
    JAVA利用axis2发布webservice
  • 原文地址:https://www.cnblogs.com/max-hou/p/9057313.html
Copyright © 2011-2022 走看看