QA@IT
この質問・回答は、@ITの旧掲示板からインポートされたものです。

【ASP.NET】リンクボタンの二度押し防止

いつも大変勉強させて頂いております。

今VB.NETでWEBアプリを開発しているのですが、リンクボタンの二度押しを防止する方法が分からず困っております。過去に同じような話題があったのですが、どのように対応されたの分かりませんでした。

http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=6305&forum=7

私の場合も同じように一つの画面に、WEBフォーム用のボタンとリンクボタンが含まれています。

ボタンについては、formタグのonsubmitイベントで制御できたのですが、リンクボタンを制御できません。できれば、ボタンを押された場合、その後リンクボタンを押されても有効にしないというように、JavaScriptを使用してクライアント側でまとめて制御したいのですが、やはりそれは無理でしょうか?

リンクボタンの制御について、みなさんどのように対処しておられるのでしょうか。どうかご教授下さい。

質問者:MOBI

回答

飯塚と申します。

ドキュメント上のすべてのリンクオブジェクトとボタンオブジェクトのクリックイベントをトラップして、ドキュメントの状態(document.readyState)を判定する、という方法はいかがでしょうか。

1) DoublePostRestriction.js というファイルを作成する。
2) DoublePostRestriction.js に下記のソースを貼り付け、UTF-8 で保存する。


// window の Load イベントを取得する。
window.onload = window_Load;

function window_Load() {
  var i;

  // 全リンクのクリックイベントを submittableObject_Click で取得する。
  for (i = 0; i < document.links.length; i ++) {
    document.links[i].onclick = submittableObject_Click;
  }

  // 全ボタンのクリックイベントを submittableObject_Click で取得する。
  for (i = 0; i < document.forms[0].elements.length; i ++) {
    if (document.forms[0].elements[i].type == "button" ||
      document.forms[0].elements[i].type == "submit" ||
      document.forms[0].elements[i].type == "reset") {
      document.forms[0].elements[i].onclick = submittableObject_Click;
    }
  }

  return true;
}

function submittableObject_Click() {
  if (isDocumentLoading()) {
    alert("処理中です…");
    return false;
  }

  return true;
}

function isDocumentLoading() {
  return (document.readyState != null &&
          document.readyState != "complete");
}

3) Web フォーム(ここでは WebForm1.aspx とする)の セクションに以下の
 コードを挿入し、DoublePostRestriction.js を読み込むよう設定する。


<script language="javascript" src="DoublePostRestriction.js"></script>

4) ページにボタン、リンクを適当に張り、ポストバックイベントを記述する。
5) 動作を確認する。

きちんとテストしていませんが、汎用的に作っているのである程度再利用ができると思います。(各ページに を1行埋めれば良い。)

私の環境(IE 6.0 SP1)では正常にポストバックし、ポストバック中のボタンやリンクのクリックを抑制することができています。

以上です。

投稿者:いいづか

編集 履歴 (0)

いいづかさん、ありがとうございます。

教えて頂いた方法で考えていたとおりの動きを実現することができました。
ほんとうにありがとうございました。

投稿者:MOBI

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。