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 件のコメント:
コメントを投稿