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>

 

posted @ 2017-10-21 21:54  QinXiao.Shou  阅读(7713)  评论(0)    收藏  举报