screenYプロパティ

screenYプロパティは、マウスイベントが発生したときの、画面に対するマウスポインタ(カーソル)の位置の垂直座標を返すプロパティ。

構文

event.screenY

戻り値

マウスイベントが発生したときの、画面に対するマウスポインタ(カーソル)の位置の垂直座標。

サンプル

水平座標:
垂直座標:

サンプルの動作について

背景色が黄色のボックス要素をクリックすると、

  • 画面に対するマウスポインタの位置の水平座標を、「水平座標:」の右横に表示する。
  • 画面に対するマウスポインタの位置の垂直座標を、「垂直座標:」の右横に表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
window.onload = function () {
    document.getElementById( "sampleBox" ).onclick = function( $event ){
        sampleFn( $event );
    };
}
var $count = 0;
function sampleFn( $event ) {
    document.getElementById( "sampleOutputX" ).innerHTML = $event.screenX;
    document.getElementById( "sampleOutputY" ).innerHTML = $event.screenY;
}
</script>

HTML

<div id="sampleBox"></div>
<p>
    水平座標:<span id="sampleOutputX" style="margin-left: 10px;"></span>
    <br />
    垂直座標:<span id="sampleOutputY" style="margin-left: 10px;"></span>
</p>

CSS

<style>
#sampleBox {
    width: 300px;
    height: 100px;
    border: 1px solid gray;
    background: yellow;
}
</style>

スポンサード リンク

カテゴリー: DOM, JavaScript, イベント, プロパティ, マウスイベントオブジェクト, リファレンス パーマリンク