2008年11月27日木曜日

Start/Stopボタンクリック時処理

つづいて、Start/Stopボタンクリック時の処理です。


cc_huu_tools_bp_20081024.buttonClick = function() {


buttonClickプロパティにマウスムーブ時の処理を行う関数リテラルを設定します。


  var obj = cc_huu_tools_bp_20081024;


オブジェクト名が長いので、obj変数に入れて使用します。


  if (!obj.buttonOnOffFlag) {


このフラグは、キャラクター画像が動いている時にonになっていますので、ここは、Startボタンが押された時の処理です。


    var x, y;


キャラクター画像の位置。


    if (!obj.imageImg) {


キャラクター画像のエレメントが保存されているか。すなわち、最初にStartボタンが押された時の処理になります。


      obj.imageImg = document.getElementById('imageImgId');
      obj.explanationImg = document.getElementById('explanationImgId');
    }


最初にStartボタンが押された時に、キャラクター画像と説明画像ののエレメントを保存します。


    x = obj.getX(obj.imageImg);
    y = obj.getY(obj.imageImg);


キャラクター画像のエレメントの位置を取得します。


    if (!obj.parentNode) {
      obj.parentNode = obj.imageImg.parentNode;
    }


キャラクター画像の親ノードを保存します。キャラクター画像のエレメントは、動いている時はbodyの子ノードになり、止まっている時は、この親ノードの子ノードに戻します。そのため、ここで親ノードを保存しておきます。


    document.getElementsByTagName('body')[0].appendChild(obj.imageImg);


キャラクター画像のエレメントをbodyの子ノードにします。

ここで問題があります。

キャラクター画像のエレメントをbodyの子ノードにしていますので、Startボタンクリック時にbodyの内容を変更することになります。ドキュメントのロードが完了していない場合、IEにおいて、bodyの内容を変更するとエラーが発生するようです。

そのため、Startボタンがクリック可能になるのは、割込処理が動作し始めたあと、3秒たってからにしています。これは、500ms割込処理で制御しています。

オライリーのJavaScript第5版には、割込処理はドキュメントの変更が可能になってからコールされるとの記述がありますが、IEに関しては駄目のようです。

現在のロジックでも、ドキュメントのロードの遅いページで、すばやくStartボタンをクリックすると、IEにおいてエラーが発生してしまいます。

どなたか、よい解決方法をご存知の方、ご教授いただけないでしょうか?

bodyの子ノードにしないという方法も試してみましたが、上位のノードでoverflow属性がhidden等に設定されていると、表示されなくなるという、別の問題が発生してしまいました。

悩ましいところです。


    obj.imageImg.style.position = "absolute";


キャラクター画像のpositionを絶対位置指定にします。


    obj.imageImg.style.left = x + 'px';
    obj.imageImg.style.top = y + 'px';


先ほど、求めたキャラクター画像のx,yをセットします。


    obj.buttonOnOffFlag = true;


buttonOnOffFlagをonにします。


    obj.explanationImg.src =
      obj.explanationImageFileName2 + obj.lang.widget + obj.explanationImageFileExtension;


説明画像を動作中のものにします。言語コードによって画像が違うのでobj.lang.widgetを利用します。


    document.getElementById('clickButtonId').innerHTML = obj.buttonName.stop;


ボタンの文字をStopに代えます。


  } else {


ここからは、動作中にボタンが押された場合、すなわち、Stopボタンクリック時の処理です。


    obj.imageImg.style.position = "relative";


positionを相対位置に戻します。


    obj.imageImg.style.left = '';
    obj.imageImg.style.top = '';


位置をクリアします。


    obj.parentNode.insertBefore(
      obj.imageImg, obj.explanationImg);


キャラクター画像のエレメントを説明画像の前に挿入します。


    obj.buttonOnOffFlag = false;


buttonOnOffFlagをoffにします。


    obj.explanationImg.src =
      obj.explanationImageFileName1 + obj.lang.widget + obj.explanationImageFileExtension;


説明画像を動作していない時のものにします。


    document.getElementById('clickButtonId').innerHTML = obj.buttonName.start;
  }
};


ボタンの文字をStartにします。
以上が、ボタンがクリックされた時の処理です。

0 件のコメント: