zoukankan      html  css  js  c++  java
  • JavaScript--取消a标签和form的submit提交默认行为

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <script>
     7         /**
     8          *    取消浏览器默认行为
     9          *       如:
    10          *          a链接跳转,
    11          *          submit按钮提交表单
    12          *          (PS:右键弹出菜单也是)
    13          *       实现方式:
    14          *          event.preventDefault();
    15          *          return false;
    16          *
    17          * */
    18         window.onload = function () {
    19             var link = document.getElementById('link');
    20             var check = document.getElementById("check");
    21             // 表单元素获取
    22             var inputTexts = document.querySelectorAll("[type='text']");
    23             link.onclick = function () {
    24                 //取消浏览器默认行为
    25                 //event.preventDefault();
    26                 return false;
    27             }
    28 
    29             // 阻止右键弹出菜单
    30             document.oncontextmenu = function () {
    31                 return false;
    32             }
    33 
    34             check.onclick = function () {
    35                 event.preventDefault();
    36                 if(inputTexts[0].value.indexOf('username') != -1) {
    37                     console.log("登录成功!请跳转页面~");
    38                 }else{
    39                     console.log("登录失败!请重新充值~");
    40                 }
    41             }
    42 
    43 
    44         }
    45     </script>
    46 </head>
    47 <body>
    48 <form action="http://www.baidu.com">
    49     <!-- 表单提交的时候,往往要先把数据进行验证,所以要先把默认的提交行为取消,数据通过检测合法后,配合JS实现数据的提交 -->
    50     <input type="text" value="我是username!!" name="username">
    51     <input type="submit" value="提交" id="check"/>
    52 </form>
    53 <a href="http://www.baidu.com">a链接标签有默认行为</a>
    54 <a href="#">a链接标签有默认行为</a>
    55 <a href="javascrit:;">a链接标签有默认行为</a>
    56 <a href="http://www.baidu.com" id="link">a链接标签有默认行为</a>
    57 </body>
    58 </html>
  • 相关阅读:
    iOS 适配iPhoneX上tableHeaderView发生了高度拉伸、UI出现的空白间距
    无线加密WEP、WPA、WPA2及TKIP、AES
    字符替换操作
    jQuery版本升级问题汇总
    ipv6服务器及环境搭建
    git删除某次提交操作
    五种IO模型
    jQuery1.6以上attr改用prop
    线程创建pthread_create用法(转)
    网络字节序与主机字节序
  • 原文地址:https://www.cnblogs.com/mrszhou/p/7707018.html
Copyright © 2011-2022 走看看