JavaScript Maniax

■マウス位置判定■

マウス位置取得は基本テクニックですので当サイトで取り上げるべきか迷いましたが、ゲーム製作などで欠かせない技術ですし備忘録として掲載いたします。

マウス移動が発生すると、
document.onmousemove
というイベントが呼び出されます。
このイベントが発生した際に指定した関数が呼ばれるよう記述する方法は、キー入力判定と一緒です。
document.onmousemove = mouseMove;
これで、ブラウザ上をマウスが移動するとmouseMove関数がcallされます。

mouseMove関数内では、event.clientXevent.clientYというプロパティがそれぞれドキュメント上のX座標、Y座標を示していますが、気をつけなければいけないのは画面がスクロールしている場合です。
画面がスクロールしていた場合に、上記の値は移動しません。たとえば、画面がちょっと下にスクロールしてしまった場合でも、画面の一番上にマウスカーソルを持ってくるとevent.clientYには0が入ってしまいます。
そこで、常套手段としてそれぞれのスクロール量を加算することで、スクロールで消えている部分も含めた全画面上での左上を(0,0)とした座標を得ることが出来ます。
x = document.body.scrollLeft + event.clientX
y = document.body.scrollTop + event.clientY
注意して欲しいのは、onmousemoveで呼ばれる関数にalert文を記載しないこと。
ちょっと動く度にダイアログが表示され鬱陶しいことこの上ありません。
現在地を取得したい場合は、やはりstatus欄に表示させましょう。
window.status = "x:y=" + x + ":" + y;


応用編

マウスがクリックされた場合は
document.onclick
というイベントが呼び出されます。
同様に関数を指定します。
document.onclick = mouseClick;
これで、ブラウザ上でマウスを左クリックするとmouseClick関数がcallされます。

[
sample] [DL]
[top] [index]
トップメニュー 基礎編 実践編 外部リンク