MouseEvent.pageY - ドキュメント上の垂直方向の位置
pageYは、MouseEventのプロパティです。ドキュメント上の、ポインタの垂直方向の位置を返します。
概要
- 名前
- pageY
- 所属
- MouseEvent
- IDL
readonly attribute double pageY;
- 仕様書
- https://drafts.csswg.org/cssom-view/#dom-mouseevent-pagey
説明
ドキュメント上における、ポインタの垂直方向の位置を表す数値を返す。
デモ
MouseEvent.pageYのデモです。div要素(茶色い部分)にclickイベントを設定しました。ポインタの位置を確認してみて下さい。
<!DOCTYPE html>
<html>
<head>
<style>
div#hoge {
width: 100% ;
min-height: 150px ;
background-color: #d36015 ;
}
div#result {
white-space: pre-wrap ;
}
</style>
</head>
<body>
<div id="hoge"></div>
<hr>
<div id="result"></div>
<script>
/** try it! **/
var callbackFn = function ( event ) {
console.log( "pageY", event.pageY ) ;
resultElement.innerHTML = "" ;
resultElement.appendChild( new Text( "currentTarget: " + event.currentTarget + "(#" + event.currentTarget.id + ")" + "\n" ) ) ;
resultElement.appendChild( new Text( "pageX: " + event.pageX + "\n" ) ) ;
resultElement.appendChild( new Text( "pageY: " + event.pageY + "\n" ) ) ;
resultElement.appendChild( new Text( "clientX: " + event.clientX + "\n" ) ) ;
resultElement.appendChild( new Text( "clientY: " + event.clientY + "\n" ) ) ;
resultElement.appendChild( new Text( "x: " + event.x + "\n" ) ) ;
resultElement.appendChild( new Text( "y: " + event.y + "\n" ) ) ;
} ;
document.getElementById( "hoge" ).addEventListener( "click", callbackFn ) ;
/** try it! **/
var resultElement = document.getElementById( "result" ) ;
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● 19+ | ● 5+ | ● 6.0+ | ● | ● 9+ | ● | ● 6.0+ | ● 4.3+ |
関連記事
- MouseEvent.screenY
- screenYは、MouseEventのプロパティです。スクリーン上の、ポインタの垂直方向の位置を返します。
- MouseEvent.pageX
- pageXは、MouseEventのプロパティです。ドキュメント上の、ポインタの水平方向の位置を返します。
- MouseEvent.y
- yは、MouseEventのプロパティです。クライアント上の、ポインタの水平方向の位置を返します。clientYと同じです。
- MouseEvent.clientY
- clientYは、MouseEventのプロパティです。イベントが発生したクライアント上の、ポインタの垂直方向の位置を返します。クライアント上とは、ウィンドウの上端からの距離を意味します。そのため、同じオブジェクトの位置でも、スクロールをすれば値が変わります。