JavaScript で 二重送信防止 する 方法

jQuery を使って フォームのサブミット および 通常ボタン 、 アンカー の二重送信（多重実行、多重送信）を防止するサンプルコードを作成しました。

サンプルコード

以下に「サブミットに対する多重送信防止」と「ボタンおよびアンカーに対する多重送信防止」のサンプルを載せますが、違いは対象としているイベント ( submit か click か) だけで基本的なコードは同じです。

サブミット に対して 多重送信防止

(function () {
  $("form").on("submit", function onsubmit (event) {
    $(this).off("submit", onsubmit).on("submit", false);
  });
})();

ボタン および アンカー に対して 多重送信防止

(function () {
  $("input[type='button']").on("click", function onclick (event) {
    $(this).off("click", onclick).on("click", false);
  });
})();

解説

サブミットの場合は submit イベントを、ボタンおよびアンカーの場合は click イベントを2度目以降呼ばれたときに無効化することで多重送信防止を実現します。 イベント動作を無効化するには on の第2引数に false を設定することで実現できます。 false を設定すると jQuery の内部では stopPropagation() (バブルアップの停止) と preventDefault() (デフォルトイベントのキャンセル) が呼び出されるので該当動作を無効化することができます。

余談ですが…イベントハンドラーに関数名を指定したくなかった（＝無名関数にしたかった）ので、 jQuery.off() の引数に arguments.callee を指定していました。 実はこの arguments.callee、MDN - arguments.callee を見ると「 "use strict" モードで使用禁止」との警告表示がありました。 なので、なくなく関数名を指定することにして上記のサンプルコードに至ります…。

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！

• Facebook ページ
• twitter