【JavaScript】Submit時のダブルクリック防止

Submit時にダブルクリックを防止するJSを書いたので共有。

筆者の環境ではChrome, FireFox, IE, Edgeで問題なく動いていました！（2021/05/21時点）

##JS本体##

var dblClickFlag = null;

function ThroughDblClick() {
    // ダブルクリック（連続ポスト）の制御
    if (dblClickFlag == null) {
        dblClickFlag = 1;
        return true;
    } else {
        return false;
    }
}

##onSubmitから呼び出す##
onSubmit属性に記述することで、True/FalseからonSubmitするか判断できます。
Falseの場合はsubmitされません。

<script>
var dblClickFlag = null;

function ThroughDblClick() {
    // ダブルクリック（連続ポスト）の制御
    if (dblClickFlag == null) {
        dblClickFlag = 1;
        return true;
    } else {
        return false;
    }
}
</script>

<form action="" method="post" onSubmit="return ThroughDblClick();">
   <input type="submit" value="送信">
</form>

注意点としてonSubmitでreturnを付けないと、普通にsubmitされます。

##2回目以降がFalseかテスト##
上のコードのままだとsubmitされて画面遷移してしまうので
type="button"にして、onclickからテストしてみます。

<script>
var dblClickFlag = null;

function ThroughDblClick() {
	console.log(dblClickFlag == null);
    // ダブルクリック（連続ポスト）の制御
    if (dblClickFlag == null) {
        dblClickFlag = 1;
        return true;
    } else {
        return false;
    }
}
</script>

<form action="" method="post" onSubmit="return ThroughDblClick();">
   <input type="submit" value="送信">
   <input type="button" value="test" onclick="ThroughDblClick();">
</form>

ちゃんと動いています(´∀｀*)