JavaScript--取消a标签和form的submit提交默认行为

Posted QinXiao.Shou

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于JavaScript--取消a标签和form的submit提交默认行为的主要内容,如果未能解决你的问题,请参考以下文章

如何在 ZF2 中启用显示全局标签取消 FormMultiCheckbox?

取消a标签的跳转行为

取消a标签的跳转行为

html中取消按钮

使用 JavaScript 和 AJAX,我是不是仍需要 HTML <form> 标签,是不是仍需要使用“提交”按钮向服务器提交表单?

javascript 怎么控制a标签的跳转