form表单中onclick事件和onsubmit事件的执行顺序

说来很惭愧，今天因为form表单的一个小问题困扰了一下午。虽然最终得以解决，但花费的时间实在是令人汗颜，现在总结一下遇到的问题。

先说一下背景，之前帮一个朋友的项目写了一个原生js的表单验证，今天突然被找到说表单验证无效。虽然很震惊我写的代码有这种事（毕竟当时学js时间不长，而且距离当时近五个月了），但作为一个有始有终的人，还是要义不容辞的调bug。得到的反馈是说表单里有两项判空验证是失效的，无论对错都会提交表单，我的第一感觉是判空的函数被改坏了，想着改回来就好了。看到源代码的情况，比我想象的要复杂，html页面中夹杂着很多后台同学自己写得js代码。当然，问题还是得解决。找到我写的表单验证代码，逐行检查，反复调试，都没问题，再看调用函数关系，得到的返回值正常显示。

下面是代码结构：

window.οnlοad=function(){odiv.οnsubmit=function(){if(!validate()){     //validate()函数包含了多个表单验证方法return false;//阻止表单默认提交}else return true;};
}

<input οnclick="myajax()" type="submit" value="提交" /></span>

然而，即使在明确得到return值为false时，还可以正常提交，经过反复测试发现问题最终出现在<input>中，代码如下：

这里写了onclick事件，myajax()是ajax异步传输数据，那么onsubmit事件和onclick事件的执行顺序呢？

简单的测试下：

    function X(){alert(11);return false;}function Y(){alert(1);}</script><body><form action="#" method="post" name="form1" οnsubmit="return X();"><input type="text" value="" /><input οnclick="Y()" type="submit" value="提交" /></form></body>

得出结论：

onclick先于onsubmit执行，若onsubmit返回值为true，执行submit；

所以合理的执行顺序很重要，否则会有不必要的错误；当然就解决先前bug来说，可以这样写：

window.οnlοad=function(){

     odiv.οnsubmit=function(){if(!validate()){     //validate()函数包含了多个表单验证方法return false;//阻止表单默认提交}else    myajax();};
};

虽然最终还是解决了问题，但是花费了很长时间，这是很得不尝失的，所以，代码规范化很重要。

当然，不仅仅是代码看起来更加优雅、高效，更重要的是避免事件冲突，减少错误发生的可能性。

form表单中onclick事件和onsubmit事件的执行顺序相关推荐

form表单验证时的onsubmit事件
form标签提交时,会触发onsubmit事件.onsubmit会在提交之前发生,所以验证可以写在onsubmit中. <!DOCTYPE html> <html> <h ...
form表单的action和onsubmit事件说明
首先 action在form是属性,onsubmit是事件. <form action="table1.jsp" onSubmit="return check(); ...
前端：JS/32/form对象（表单）（form对象的属性，方法和事件），受返回值影响的两个事件（onclick事件，onsubmit事件），获取表单的元素对象的三种方式，表单的提交和验证方法总结
form 对象(表单) 一个<form>标记,就是一个<form>对象: 1,form对象的属性 name :表单的名称,主要用来让JS来控制表单: action :表单的数据 ...
form表单中的onSubmit
今天看一个代码,突然发现了一个form表单中的onSubmit,估计是好久都没有写前端表单提交了,突然忘了,赶紧到网上查了查. 原文地址:https://www.cnblogs.com/ahudyan ...
form的submit()方法不能触发onsubmit事件的解决方法，兼容各版本浏览器。
form的submit()方法不能触发onsubmit事件的解决方法,兼容各版本浏览器. 参考文章: (1)form的submit()方法不能触发onsubmit事件的解决方法,兼容各版本浏览器. ( ...
html表单提交按钮代码,JavaScript在form表单中使用button按钮实现submit提交方法
submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上. ...
form表单中根据值判断是否disabled_Java 0基础入门（Html表单、表单元素）
上一篇:Java 0基础入门 (Html标签的使用) 表单在网页中主要负责数据采集功能. 一.表单实际应用场景百度搜索 5173注册如上两张图,图中的黑色线条是我画上去的,如果按照黑线,在Excl ...
关于继承BaseServlet后为什么form表单中必须加上method=“post”
关于继承BaseServlet后为什么form表单中必须加上method="post" 学习Servlet中一直有个困惑,在提交form表单时我action ...
在form表单中添加一个隐藏的reset按钮，
//在form表单中添加一个隐藏的reset按钮, <input type="reset" style="display:none;" /> //然 ...

form表单中onclick事件和onsubmit事件的执行顺序

form表单中onclick事件和onsubmit事件的执行顺序相关推荐

最新文章

热门文章