MouseEvent clientY属性

DOM イベント MouseEvent

定義と使用方法

マウスイベントがトリガーされたとき、clientY属性はクライアントエリア内の垂直座標を返します。

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

ヒント：クライアントエリア内の水平座標を取得するには、 clientX属性.

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

例

例1

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

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

結果は：

X coords: 142, Y coords: 99

実際に試してみてください

例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;

実際に試してみてください

構文

イベント.clientY

技術的詳細

返り値： 数値、ピクセル単位で垂直座標を示します。
DOMバージョン： DOMレベル2イベント

ブラウザのサポート

属性 Chrome IE Firefox Safari Opera
clientY サポート サポート サポート サポート サポート

関連ページ

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

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

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

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

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

DOM イベント MouseEvent