【jQuery】マウスの座標をjQueryを使って調べる方法！

jquery

マウスに追従するようなツールチップなどを作るときにマウスの座標ってどう取得するかをメモ。

動作結果（スクリプトはブラウザのソースコードから参照）

関数にイベントハンドラを引数に渡してイベントからclientX・clientYで取得

いつもは普通に「function(){}」と記述していたけどイベントオブジェクトを取得したいときやイベントオブジェクトを操作した時などは「function(e){}」といった感じで引数にイベントを指定

//通常は下記のような記述
jQueryオブジェクト.mousemove(function(){});

//イベントターゲットや操作したいとき
jQueryオブジェクト.mousemove(function(e){
　　alert(e.target); //イベントターゲットとなるdomElement名が表示される
});

clientXとclientYでマウス座標を取得

$("#divcontent").mousemove(function(e){
		//イベントオブジェクトからマウスの各座標を取得
		var dx=e.clientX;
		var dy=e.clientY;

　　　　　　　//座標をid名：resultに表示
		$("#result").html("
マウスのX："+dx+"
マウスのY:"+dy+"
");
		});
	});

マウス座標を取得する種類

マウスの座標を取得するプロパティは下記のタイプがある（y座標を省略）

clientX・・・クライアント領域（ウィンドウ）上の座標

screenX ・・・スクリーン上の座標

pageX・・・ページ上の座標

offsetX・・・クリックした要素上の座標

$("#divcontent").mousemove(function(e){
		
　　　　　　　var cx=e.clientX;
		var cy=e.clientY;
		
		var sx=e.screenX;
		var sy=e.screenY;
		
		var px=e.pageX;
		var py=e.pageY;
		
		var ox=e.offsetX;
		var oy=e.offsetY;
	});

といった感じで取得する。違いはサンプルを見れば分かるがscreenXなどはツールバーなども含む（要はパソコンのスクリーン）がoffsetXはイベントターゲット・・サンプルの場合だとdivcontentのdiv要素を左上を基準とした座標になる