MouseEventclientXプロパティ_
例
要素上でマウスボタンがクリックされたときのマウスポインタの座標を出力します。
var x = event.clientX; // Get the horizontal coordinate
var y = event.clientY; // Get the vertical coordinate
var coor = "X coords: " + x + ", Y coords: " + y;
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
clientXプロパティは、マウスイベントがトリガーされたときに、マウスポインターの水平座標(クライアント領域に応じて)を返します。
クライアント領域は現在のウィンドウです。
ヒント:マウスポインタの垂直座標(クライアント領域に応じて)を取得するには、clientYプロパティを使用します。
注:このプロパティは読み取り専用です。
ブラウザのサポート
Property | |||||
---|---|---|---|---|---|
clientX | Yes | Yes | Yes | Yes | Yes |
構文
event.clientX
技術的な詳細
戻り値: | マウスポインタの水平座標をピクセル単位で表す数値。 |
---|---|
DOMバージョン: | DOMレベル2イベント |
その他の例
例
マウスポインタが要素上を移動している間、マウスポインタの座標を出力します。
var x = event.clientX;
var y = event.clientY;
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;
例
clientXとclientYおよびscreenXとscreenYの違いのデモンストレーション:
var cX = event.clientX;
var sX = event.screenX;
var cY = event.clientY;
var sY = event.screenY;
var coords1 = "client - X: " + cX + ", Y coords: " + cY;
var coords2 = "screen - X: " + sX + ", Y coords: " + sY;
関連ページ
HTML DOMリファレンス:MouseEventclientYプロパティ
HTML DOMリファレンス:MouseEventscreenXプロパティ
HTML DOMリファレンス:MouseEventscreenYプロパティ
HTML DOMリファレンス:MouseEventoffsetXプロパティ
HTML DOMリファレンス:MouseEventoffsetYプロパティ