クリックイベント発生の座標:offsetX/Y,clientX/Y,pageX/Y,screenX/Yの区別
イベント発生場所の座標:offsetX/Y,clientX/Y,pageX/Y,screenX/Y
- マウスクリック(click)、オバー(mousehover)などのイベントが発生すると、発生場所の座標がイベントのプロパティにあります

- イベント発生場所の座標は以下のようです
- offsetX, offsetY
- clientX, clientY
- pageX, pageY
- screenX, screenY
参照オブジェクトの違う座標を理解する
- イベント発生時の座標がそれぞれの参照オブジェクトを参照します
- offestX/Y:イベントリスナーを設定してオブジェクト(例:div、アンカータグ、ボタンなど)
- そのオブジェクトを表示するボックスの縦、横の座標となります
- clientX/Y:viewportの縦、横までの座標となります
- pageX/Y:コンテンツのHTMLのドキュメント(htmlタグ)に参照します
- コンテンツが長い時に、ブラウザのviewportに表示切れないことがあります。
- ブラウザのスクロール機能でhtmlコンテンツを表示します
- screenX/Y:文字通りにスクリーン(モニター)の可視範囲を参考します
- それぞれの座標は以下のイメージで表現

htmlにあるエレメントの座標(例:offsetX/Y)と違う