form表單中onclick事件和onsubmit事件的執行順序
阿新 • • 發佈：2019-01-10
說來很慚愧，今天因為form表單的一個小問題困擾了一下午。雖然最終得以解決，但花費的時間實在是令人汗顏，現在總結一下遇到的問題。
先說一下背景，之前幫一個朋友的專案寫了一個原生js的表單驗證，今天突然被找到說表單驗證無效。雖然很震驚我寫的程式碼有這種事（畢竟當時學js時間不長，而且距離當時近五個月了），但作為一個有始有終的人，還是要 義不容辭的調bug。得到的反饋是說表單裡有兩項判空驗證是失效的，無論對錯都會提交表單，我的第一感覺是判空的函式被改壞了，想著改回來就好了。看到原始碼的情況，比我想象的要複雜，html頁面中夾雜著很多後臺同學自己寫得js程式碼。當然，問題還是得解決。找到我寫的表單驗證程式碼，逐行檢查，反覆除錯，都沒問題，再看呼叫函式關係，得到的返回值正常顯示。
下面是程式碼結構：
window.onload=function(){
odiv.onsubmit=function(){
if(!validate()){ //validate()函式包含了多個表單驗證方法
return false;//阻止表單預設提交
}
else return true;
};
}<input onclick="myajax()" type="submit" value="提交" /></span>然而，即使在明確得到return值為false時，還可以正常提交，經過反覆測試發現問題最終出現在<input>中，程式碼如下：
這裡寫了onclick事件，myajax()是ajax非同步傳輸資料，那麼onsubmit事件和onclick事件的執行順序呢？
簡單的測試下：
<script>
得出結論：function X(){ alert(11); return false; } function Y(){ alert(1); } </script> <body> <form action="#" method="post" name="form1" onsubmit="return X();"> <input type="text" value="" /> <input onclick="Y()" type="submit" value="提交" /> </form> </body>
onclick先於onsubmit執行，若onsubmit返回值為true，執行submit；
所以合理的執行順序很重要，否則會有不必要的錯誤；當然就解決先前bug來說，可以這樣寫：
window.onload=function(){
odiv.onsubmit=function(){
if(!validate()){ //validate()函式包含了多個表單驗證方法
return false;//阻止表單預設提交
}
else myajax();
};
};
雖然最終還是解決了問題，但是花費了很長時間，這是很得不嘗失的，所以，程式碼規範化很重要。
當然，不僅僅是程式碼看起來更加優雅、高效，更重要的是避免事件衝突，減少錯誤發生的可能性。