マウス位置の取得とpopupコメントの表示位置

関連エントリイリスト in this Blog

• mouseover時の説明用Popup表示方法（script上の配慮事項）
• 「イベント」関連エントリイ in this Blog

Javascriptによるマウス位置取得

マウス位置の取得については様々なサイトで語られている。だから屋上屋を重ねて述べることはない。

しかし、昨日触れたようにそれはそれなりに面倒である。特にIEの場合には様々な要因がマウス位置取得に関わるため、単純には行かない。

とはいえ、その煩雑さを理解してしまえば、マウス位置取得そのものは、どうってことはない単純なことだ。

Javascriptによるpopupコメントの位置取得

マウス位置が取得できれば、あるマウスイベント（onclick、onmouseover、onmouseout、onmousemove、etc.）が発生した場合に、絶対配置要素であるポップアップコメントブロック（以下PopupBlock）を、そのイベント発生位置の右上に、あるいは右下に等々、お好みの位置に表示させるが出来るようになる。

Javascriptによるpopupコメントの表示位置修正

さて、今回記録しておきたいことは、このPopupBlockの表示位置に関わる問題である。マウスイベント発生位置は当然、画面右や画面下に近い場合もある。その時Popup When Here is MouseCursorは（左の緑色で表示されている文字列にマウスカーソルを合わせると、テストコメントが表示される。）所定の右上や右下に表示したのでは、隠れてしまうから、画面の右にピタッと寄せて、あるいは下に寄せて表示させることが好ましい。

では、どのようにしてピタッと画面右や画面下にPopupBlockを表示させるか？　自ずからそれが問われることになるが、今回このことにちょっと苦労してしまったのだ。

とっくの昔に解決したと思いこんでいたが、IE７正式版登場に伴うmyblogデザイン見直し作業の中で、改めてこれまでスクリプトが不完全であったことに気がつかされてしまったのだ。☆=>=>=>(+_＋。）

マウスイベントに係る位置を示すプロパティは沢山ある。x、pageX、layerX、clientX、screenX、pageXOffset、OffsetX、scrolLeft、clientLeft・・。これらのマウスポインタイベントプロパティとPopupBlockの横、縦の外枠サイズ、並びにスクリーンのinnerWidth とinnerHeight ───これらの３つの関係を関数として整理することによって、初めてPopupBlockを画面右や下に隠れないように設定することになる。