js STUDIO

.pageY

ドキュメント全体の相対的なイベント発生場所の垂直位置を返します。

文法 

  1. var pageY = event.pageY;

pageY変数には、マウスイベント発火時の垂直位置のピクセル数値が格納されます。 この値はドキュメント全体からの相対位置になります。 このプロパティは、ページの垂直スクロールを考慮します。

例 

  1. <html>
  2. <head>
  3. <title>pageX\pageY & layerX\layerY example</title>
  4. <style type="text/css">
  5.  body {
  6.   font-size: 12px;
  7.  }
  9.  #d1 {
  10.   border: solid blue 1px; padding: 20px;
  11.  }
  13.  #d2 {
  14.   position: absolute;
  15.   top: 180px; left: 80%; right:auto;
  16.   width: 40%; border: solid blue 1px;
  17.   padding: 20px;
  18.  }
  20.  #d3 {
  21.   position: absolute;
  22.   top: 240px; left: 20%;
  23.   width: 50%; border: solid blue 1px;
  24.   padding: 10px;
  25.  }
  27. </style>
  28. </head>
  30. <body>
  32. <p>マウス座標を表示するために、ページ上の何処かをクリックしてください。</p>
  34. <div id="d1">
  35.   <span>
  36.     styleでposition指定されていないDIVであるため、
  37.     クリックの戻り値であるlayerX / layerYの値は、
  38.     pageX / PageYの値とほぼ同じです。
  39.   </span>
  40. </div>
  42. <div id="d2">
  44. <span>
  45.   styleでposition指定されたDIVであるため、
  46.   クリックの戻り値は、この要素の左上隅の角の相対になります。
  47.   layerX、Yと異なり、pageX\pageYのプロパティは、ページのスクロールも含めて、
  48.   依然としてdocument内の絶対位置を返す事に、注目してください。
  49. </span>
  51. <span>
  52.   ページをスクロールした状態での動作も確認してみてください！
  54.   styleでposition指定されたDIVであるため、
  55.   クリックの戻り値は、この要素の左上隅の角の相対になります。
  56.   layerX、Yと異なり、pageX\pageYのプロパティは、ページのスクロールも含めて、
  57.   依然としてdocument内の絶対位置を返す事に、注目してください。
  58. </span>
  60. </div>
  62. <div id="d3">
  63. <form name="form_coords" id="form1">
  64.  親要素のID: <input type="text" name="parentId" size="7" /><br />
  65.  pageX:<input type="text" name="pageXCoords" size="7" />
  66.  pageY:<input type="text" name="pageYCoords" size="7" /><br />
  67.  layerX:<input type="text" name="layerXCoords" size="7" />
  68.  layerY:<input type="text" name="layerYCoords" size="7" />
  69. </form>
  70. </div>
  72. <script>
  73. function showCoords(evt){
  74.   var form = document.forms.form_coords;
  75.   var parent_id = evt.target.parentNode.id;
  76.   form.parentId.value = parent_id;
  77.   form.pageXCoords.value = evt.pageX;
  78.   form.pageYCoords.value = evt.pageY;
  79.   form.layerXCoords.value = evt.layerX;
  80.   form.layerYCoords.value = evt.layerY;
  81. }
  83. //初期処理
  84. document.body.onmousedown = function(event){
  85.   showCoords(event);
  86. }
  87. </script>
  89. </body>
  90. </html>

仕様

何かしらの公開されいる標準の一部ではありません。

 Back to top

© 2017 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。 構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • 特定のブラウザに特化しすぎている情報やあまりにも古い情報、 または試験的に導入されているようなAPIや機能については、省略していることがあります。
  • 例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、 その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
  • MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。