デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.pageXイベントが発生したX座標(ブラウザの座標系)の取得

構文

イベントが発生したX座標(ブラウザの座標系)の取得返値:数値
イベントオブジェクト.pageXver1.0.4〜

機能

イベントオブジェクトのpageXプロパティを利用するとイベントが発生したX座標を取得できます。座標系はセレクタの要素ではなくブラウザ(document)の座標系になります。
iframe内で利用した場合はiframeのdocumentが基準になります。

解説

イベントが発生したX座標(ブラウザの座標系)を取得します

サンプル(pageX/01.html)を開いてbody内にdiv要素が1つあることを確認してください。jQueryは以下の様に記述され、div要素をクリックしたらpageXプロパティで取得した「イベントが発生したX座標」をtextメソッドを利用してdiv要素内に表示します。

$("div").click(function (eo){
	$("div").text(eo.pageX);
});

結果として、div要素をクリックするとクリックした位置のX座標(ブラウザの座標系)がdiv要素内に表示されます。

関連項目

イベントが発生したY座標(ブラウザの座標系)を取得したい場合は、pageYプロパティを利用します。

メモ

イベント発生と座標取得のタイムラグ

素早い動作でイベントを発生させると、pageXプロパティが予想外の値になります。
サンプル(pageX/test01.html)を開いてbody内の構成はpageX/01.htmlと同じ事を確認してください。

jQueryもほとんどpageX/01.htmlと同じで、異なるのは以下の様にイベントがmouseleaveイベントに変更された点だけです。これでマウスカーソルがdiv領域から離れた座標をdiv要素内に表示するようになります。

$("div").mouseleave(function (eo){
	$("div").text(eo.pageX);
});

このサンプルで、右から左にdiv要素上を素早く横切ってください。すると値には「-30」など、あり得ない(ブラウザ外の)値が表示されることがあります。

これはOSがマウスポインタの座標を監視する間隔によるため、jQuery以外でも発生する問題なので対処法は多分ないと思います。