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

最新推荐文章于 2024-03-27 12:34:06 发布

ClaireKe

最新推荐文章于 2024-03-27 12:34:06 发布

阅读量1.4w

点赞数 1

分类专栏： js/jqury/ajax 随笔 Web开发文章标签： form onclick onsubmit html 执行顺序

本文链接：https://blog.csdn.net/ClaireKe/article/details/50984859

版权

随笔同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

Web开发

14 篇文章 0 订阅

订阅专栏

js/jqury/ajax

7 篇文章 0 订阅

订阅专栏

说来很惭愧，今天因为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();
    };
};

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

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

ClaireKe

关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
form表单中onclick事件和onsubmit事件的执行顺序

说来很惭愧，今天因为form表单的一个小问题困扰了一下午。虽然最终得以解决，但花费的时间实在是令人汗颜，现在总结一下问题。先说一下背景，之前帮一个朋友的项目写了一个原生js的表单验证，今天突然被找到说表单验证无效。虽然很震惊我写的代码有这种事（毕竟当时学js时间不长，而且距离当时近五个月了），但作为一个有始有终的人，还是要义不容辞的调bug。得到的反馈是说表单里有两项判空验证是失效的，无论对
复制链接

扫一扫