MouseEvent clientX属性

DOM イベント MouseEvent

定義と使用方法

マウスイベントがトリガーされたとき、clientX属性はマウス指針の水平座標（クライアントエリアに基づいて）を返します。

クライアントエリアは現在のウィンドウです。

ヒント：マウス指針の垂直座標（クライアントエリアに基づいて）を取得するには、以下を使用してください clientY プロパティ。

注釈：この属性は読み取り専用です。

例

例1

要素上でマウスボタンをクリックしたときにマウス指針の座標を出力します：

var x = event.clientX;     // 水平座標を取得
var y = event.clientY;     // 垂直座標を取得
var coor = "X coords: " + x + ", Y coords: " + y;

自分で試してみてください

例2

マウス指針が要素上に移動したときにマウス指針の座標を出力します：

var x = event.clientX;
var y = event.clientY; 
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;

自分で試してみてください

例3

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;

自分で試してみてください

文法

event.clientX

技術的詳細

返り値： ピクセル単位の水平座標を表す数値。
DOMバージョン： DOMレベル2イベント

ブラウザのサポート

属性 Chrome IE Firefox Safari オペラ
clientX サポート サポート サポート サポート サポート

関連ページ

HTML DOM リファレンスマニュアル：MouseEvent clientY プロパティ

HTML DOM リファレンスマニュアル：MouseEvent screenX プロパティ

HTML DOM リファレンスマニュアル：MouseEvent screenY プロパティ

HTML DOM リファレンスマニュアル：MouseEvent offsetX プロパティ

HTML DOM リファレンスマニュアル：MouseEvent offsetY プロパティ

DOM イベント MouseEvent