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

jquery

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

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

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

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

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

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

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

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

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

pageX・・・ページ上の座標

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

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