JavaScript & jQuery & CSS & HTML の達人

JavaScript と jQuery と CSS と HTML の使い方がわかるブログ

JavaScript + jQuery でドキュメント上のマウスポインタの座標を取得する方法

マウスポインタの座標を取得する

マウスポインタの座標を取得するには、JavaScript の「clientX」「clientY」を利用する。 

X座標の取得:clientX
Y座標の取得:clientY

動作サンプル

ドキュメント(ページ)の左上がXとYの0座標となる。 

X座標:0
Y座標:0

JavaScript + jQuery ソースコード

ドキュメント(ページ)全体を対象にマウスポインタの移動座標を取得している。ソースコードjQueryJavaScript がミックスされている。 

$(function() {
     $(document).mousemove(function(e) {
          $("#xpos").text("X座標:" + e.clientX);
          $("#ypos").text("Y座標:" + e.clientY);
     });
});

終わり