Submit時のダブルクリック防止

tech

運用している WEBサイトでフォームからの投稿ボタンやリセットボタンをダブルクリックされての不具合が頻発したので対策を施した。

スマホ端末のユーザーは問題ないのだが、PC環境でダブルクリックの癖が抜けない人が居るらしい。

参考にしたサイトは下記…というかそのまんまである。

JS本体

var dblClickFlag = null;

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

onSubmitから呼び出す

<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>

2回目以降がFalseになるかをテスト

test.html に下記をコピペしてテストしてみる。

<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>
  1. Chromeで test.html ファイルを表示させてデベロッパーツールを起動
  2. testボタンをダブルクリック
  3. Consoleタブで 1度目 true / 2度目以降 false となることを確認できればOK