DHTML -2-

No.13　その他のマウスイベント動作
01　マウスの移動時の処理～mousemove()～

　マウスイベントには前章で説明したマウスのクリックダウンのほか、移動とクリックアップの２つがあります。これら二つは、処理として煩雑なことを行っているわけではないので、この章で２つとも説明したいと思います。

　レイヤーの移動量の算出は、
　　「　現在のマウス位置－クリックした時点でのマウス位置＋クリックした時点でのレイヤー位置　」
　によって、算出することが出来ます。　ここでは、マウスのクリックを完了した時点で、
　　クリックした時点でのマウス位置　： ClickX / ClickY
　　クリックした時点でのレイヤー位置　： nowLayX / nowLayY
　が決定しているので、計算式は

「Line ４５０～４５１」


  layMoveX = mouseX - ClickX + nowLayX;
  layMoveY = mouseY - ClickY + nowLayY;

　マウスの現在位置を示す「mouseX / mouseY」にこれらの値を加減することで行えます。

　マウスの動きの追従は、表示しているブラウザ外の部分であっても数値として算出されます。　この為、レイヤーを完全に画面外へ配置することも理論上は可能になるわけですが、Cookieで座標を記録するシステムを搭載している関係上、一度画面外に配置されてしまったレイヤーは、リロードしても表示されなくなってしまいます。
　しかも、プラス方向のはみ出しならばスクロールバーを移動させれば見ることは出来ますが、マイナス方向、つまり、ブラウザア画面の左側か上側にはみ出てしまった場合、スクロールバーは表示されませんので、事実上そのレイヤーの制御は出来なくなります。　こういった現象に対して対処するため、レイヤーの動きにはマイナス方向に対するリミッターを追加しておく必要があります。

「Line ４５３～４５４」


  if (mouseX <= mXlimit){ layMoveX =  mXlimit - ClickX + nowLayX; }
  if (mouseY <= mYlimit){ layMoveY = mYlimit - ClickY + nowLayY; }

　　mXlimit と、 mYlimit　は、マウスの限界値として、製作者が任意に設定した数値です。　この数値限界を超えた場合、レイヤーの表示位置である「layMoveX / layMoveY 」は、 リミット値をマウスの値としたレイヤー座標の算出を適応させ、マウスの値を反映させないようにしています。

レイヤーへの配置　　「Line ４５０～４５４」

　レイヤーの表示位置を確定するスクリプトそのものは、「In_Move() 」ファンクションと同様のものを搭載しているので、個々の部分はファンクション呼び出しでも可能ですが、この「mousemove()」ファンクションは非常に頻繁に呼び出されるため、スタック増加による処理速度低下をある程度防ぐ意味合いから、あえて独立させて搭載しています。

「Line ４５０～４５１」


  if (isIE5 || isIE6 || isNS6){
    el = document.getElementById("Hopup_Message"+LayerNumber);
    el.style.left    = layMoveX;
    el.style.top     = layMoveY;
  } else if(isNS4) {
    document.layers["Hopup_Message" + LayerNumber ].
                                 moveTo(layMoveX,layMoveY);
  }

ページの最上段へ移動します