- PR -

ボタン連打制御

1|2|3|4 次のページへ»
投稿者投稿内容
ピンクの恐竜
常連さん
会議室デビュー日: 2005/02/01
投稿数: 42
投稿日時: 2005-09-01 16:06
いつも勉強させて頂いております。

現在ボタン連打制御をJavaScriptでやろうと思い、
過去ログを参照しながら作成したところ以下のところまで作成しました。

コード:

<html>



<head>

  <title>HTML検証</title>

  

<script>

<!--



function go(){



	f1.submit();

}





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");

}



//-->

</SCRIPT>



</head>



<body>



<form name="f1" action="view02.jsp" method="POST">

  <input type="text" name="value1" value="">秒間停止

  <input type="button" value="送信" onclick="go()"></br>

  <a href="JavaScript:go();">リンク</a>

</form>



</body>



</html>


ところがこの処理ですと、もともとボタンのonclickについていたgo()の処理が実行されません。

やりたい事としては次のようになります。
・onload時に全てのボタン、全てのリンクのonclickにsubmittableObject_Click()の処理を追加する。
・ボタンやリンクに直接onclickで書かれていた処理はsubmittableObject_Click()の処理が終わってから実行する。

です。
どのようにしたらできるようになるのでしょうか？
またはそんなことは出来ないのでしょうか？

以上宜しくお願い致します。

背景といたしましては既存の画面が何十、何百と存在し今までボタン連打処理が入っていなかったので、ここにきてその処理を入れようということになっています。

ですのでなるべく全ての箇所に対してonclick="submittableObject_Click();go();"と記述するのは避けたいと考えています。

[ メッセージ編集済み 編集者: ピンクの恐竜 編集日時 2005-09-01 17:41 ]
葉瀬崎浩樹
大ベテラン
会議室デビュー日: 2005/06/28
投稿数: 115
お住まい・勤務地: 兵庫県
投稿日時: 2005-09-01 16:19
引用:

ピンクの恐竜さんの書き込み (2005-09-01 16:06) より:
コード:
<form name="f1" action="view02.jsp" method="POST">
  <input type="text" name="value1" value="">秒間停止
  <input type="button" value="送信" onclick="go()"></br>
  <a href="JavaScript:go();">リンク</a>
</form>



回答ではなくて恐縮ですが。
えっと、onclick="go()"　に「;」が無いのが
少し気になったので返信してみました。

#.jspっていうのも気になったけど・・まあいいか。。
ピンクの恐竜
常連さん
会議室デビュー日: 2005/02/01
投稿数: 42
投稿日時: 2005-09-01 16:30
返信ありがとうございます。

指摘された箇所に";"を加えましたがうまく動きませんでした。

「.jsp」は気にしないでください。
今回の質問内容がJavaScriptでしたのでこちらで質問させていただきました。
JavaScriptに関してはJavaの会議室よりもこちらの方が詳しいイメージがありましたので（過去ログでこちらの方が有用な情報があったもので自分の勝手なイメージです）、こちらに投稿させて頂きました。

他に何か気になるところはございませんか？
葉瀬崎浩樹
大ベテラン
会議室デビュー日: 2005/06/28
投稿数: 115
お住まい・勤務地: 兵庫県
投稿日時: 2005-09-01 16:57
■実験１
・イベントの設定コードをコメントアウト
//document.forms[0].elements[i].onclick = submittableObject_Click;

■実験２
・イベントに関数を複数回セット
document.forms[0].elements[i].onclick = submittableObject_Click;
document.forms[0].elements[i].onclick = funcSomething;
※funcSomethingには適当な関数を当ててください。

この結果から、なにが起きているか想像できそうです。
葉瀬崎浩樹
大ベテラン
会議室デビュー日: 2005/06/28
投稿数: 115
お住まい・勤務地: 兵庫県
投稿日時: 2005-09-01 17:26
IE6で確認しました。
■実験１：結果
　<input type="button" value="送信" onclick="go();">が動作した。

■実験２：結果
　最後に設定した関数(funcSomething)のみ動作した。

■追加情報
・setAttribute や、addEventListener 等でもイベント設定できる。
　（ブラウザによっては無効なようですが）


上記の構文では、複数のイベントハンドラ登録はできないのかな。。
という気がしました。

できないのであれば（小細工ですけど）
ボタン用の送信チェック関数を別途作成し、
その中で、submittableObject_Click() と go()を順に処理してやれば
回避できるかも知れません。

私はこのへんでリタイアです。
どうでしょう？　識者のか（ｒｙ

[ メッセージ編集済み 編集者: 葉瀬崎浩樹 編集日時 2005-09-01 17:30 ]
ピンクの恐竜
常連さん
会議室デビュー日: 2005/02/01
投稿数: 42
投稿日時: 2005-09-01 17:29
返信ありがとうございます。

葉瀬崎浩樹さんのお気づきの通り、
私の方でもいくつか実験してみて何が起こっているかは察しがついています。

そのため

コード:
document.forms[0].elements[i].onclick = submittableObject_Click;

の部分を

コード:
document.forms[0].elements[i].onclick = function (){
    submittableObject_Click();
    document.forms[0].elements[i].onclick();
}


等に変更して実行してみてもうまく動きませんでした。
alert()でdocument.forms[0].elements[i]の部分を表示するとobjectとして認識されていないようでした。
またalert()で"i"を表示したら、ちゃんと数値が表示されていました。

どのようにコーディングしていいのか行き詰っている状態です。

どのようなことでも構わないので何か気になることがあったら指摘して下さい。

宜しくお願い致します。
ピンクの恐竜
常連さん
会議室デビュー日: 2005/02/01
投稿数: 42
投稿日時: 2005-09-01 17:39
ごめんなさい。

すれ違いに投稿してしまったようです。

go();の処理はテストでは1つですが、実際の画面には複数存在します。
複数と言うよりもボタン数分存在します（関数名は同じでも引数がことなる等を含めて）。
回避関数を作成するにも膨大な数になってしまいます。

なにか他に方法は無いでしょうか？
葉瀬崎浩樹
大ベテラン
会議室デビュー日: 2005/06/28
投稿数: 115
お住まい・勤務地: 兵庫県
投稿日時: 2005-09-01 17:52
良い方法については、識者の方を待つとして・・（ぉ

話を戻すことになってしまいますが、
基本的な内容の確認を怠っていました。

いわゆる「ボタン連打制御」って、大きく分けると
1.「ドキュメントの読込み完了までボタン押下させたくない」
2.「送信後のレスポンス待ち時間中に、複数回ボタン連打されたくない」
の２種類あると思ってます。

今回は1.の制御を行いたいということですよね。
でしたら、ボタン単位ではなく、
<form>か<body>単位で制御をかけれるかも知れません。

（このへん興味があるので後で実験して見ます）
1|2|3|4 次のページへ»

スキルアップ／キャリアアップ（JOB@IT）