SYNCERのロゴ
アイキャッチ画像

MouseEvent.offsetY - 発信源となるオブジェクトからの垂直方向のオフセット

offsetYは、MouseEventのプロパティです。イベントの発信源となるオブジェクトの、padding-topの上端からポインタまでの垂直方向の距離を返します。伝播により発生したイベント内でポインタの位置を把握するのに有用です。

概要

名前
offsetY
所属
MouseEvent
IDL
readonly attribute double offsetY;
仕様書
https://drafts.csswg.org/cssom-view/#dom-mouseevent-offsety

説明

イベントの発信源のオブジェクトからポインタまでの垂直方向の距離を表す数値を返す。

デモ

MouseEvent.offsetYのデモです。2つのdiv要素に同じイベントを設定しました。赤い部分をクリックした時、伝播によってついでに青い部分のイベントも発生します。この時、発信源であるイベントと、伝播によって発生したイベントの、いずれもoffsetX、offsetYの値が同じであることを確認しましょう。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div#hoge, div#fuga {
	min-height: 100px ;
	background-color: red ;
}

div#fuga {
	padding: 24px ;
	background-color: blue ;
}

div#result {
	white-space: pre-wrap ;
}
</style>
</head>
<body>
	<div id="fuga">
		<div id="hoge"></div>
	</div>
	<p><button id="clear">削除</button></p>
<hr>
<div id="result"></div>
<script>
/** try it! **/
var element1 = document.getElementById( "hoge" ) ;
var element2 = document.getElementById( "fuga" ) ;

var callbackFn =  function ( event ) {
	console.log( "offsetY", event.offsetY ) ;

	resultElement.appendChild( new Text( "currentTarget: " + event.currentTarget + "(#" + event.currentTarget.id + ")" + "\n" ) ) ;
	resultElement.appendChild( new Text( "offsetX: " + event.offsetX + "\n" ) ) ;
	resultElement.appendChild( new Text( "offsetY: " + event.offsetY + "\n\n" ) ) ;
} ;

element1.addEventListener( "click", callbackFn ) ;
element2.addEventListener( "click", callbackFn ) ;
/** try it! **/

var resultElement = document.getElementById( "result" ) ;

document.getElementById( "clear" ).onclick = function () {
	resultElement.innerHTML = "" ;
}
</script>

</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
19+ 39+ 6.0+ 6.0+ 4.3+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月9日 (月)
コンテンツを公開しました。