たとえば jQuery でマウスクリックのイベントを取って座標を取得するという時に、いくつか X, Y で組になっているプロパティがあって、どれを使えばいいのか、となる。 Y 座標を調べる用途のほうが多いのでここからは *Y の方だけで話を進めるが *X についてもだいたい同じように定義されている。 定義されている、と言っても素の JavaScript ではブラウザごとにプロパティがあったりなかったりするので jQuery がうまく差を吸収してくれた後の話、あるいは W3C で策定が進んでいるらしい CSSMOS View Module に準拠していればという話。 前振りが長くなった。
今回取り上げるのは clientY, pageY, screenY の3種類。 他にも offsetY とかブラウザによっては layerY とかあるらしいが、パスする。 一応言葉で書いてみると、clientY は viewport の原点からの相対的高さ、pageY は文書全体の原点からの相対的高さ、screenY はスクリーンの原点からの相対的高さ、といった定義になるはずだがとりあえず「それはどこを指してるの」という感想しか浮かばない。 ということで絵を描いてみた。
灰色の枠がブラウザで、その中の薄い部分が表示されている部分、×がイベント発生位置。 外側の薄い青が仮想的な文書全体を表している。
ここまでが基本で、iframe とか overflow:scroll の要素とかが絡んできた時の挙動こそが気になるところだが、慣れないお絵描きで力尽きたので、またその内ということにしておく。
なお、絵が表示されないという古い IE をお使いの方はブラウザを取り替えてご覧ください。
ラベル：javascript jquery
