.layerX

https://developer.mozilla.org/en-US/docs/Web/API/event.layerX

現在のレイヤーの相対的なイベント発生場所の水平位置を返します。

文法

var Xpos = event.layerX;

Xpos変数には、マウスイベント発火時の、マウスポインタの水平位置のピクセル数値が返ります。

例

<html>
<head>
<title>pageX\pageY & layerX\layerY example</title>
<style type="text/css">
 body {
  font-size: 12px;
 }

 #d1 {
  border: solid blue 1px; padding: 20px;
 }

 #d2 {
  position: absolute;
  top: 180px; left: 80%; right:auto;
  width: 40%; border: solid blue 1px;
  padding: 20px;
 }

 #d3 {
  position: absolute;
  top: 240px; left: 20%;
  width: 50%; border: solid blue 1px;
  padding: 10px;
 }

</style>
</head>

<body>

<p>マウス座標を表示するために、ページ上の何処かをクリックしてください。</p>

<div id="d1">
  <span>
    styleでposition指定されていないDIVであるため、
    クリックの戻り値であるlayerX / layerYの値は、
    pageX / PageYの値とほぼ同じです。
  </span>
</div>

<div id="d2">

<span>
  styleでposition指定されたDIVであるため、
  クリックの戻り値は、この要素の左上隅の角の相対になります。
  layerX、Yと異なり、pageX\pageYのプロパティは、ページのスクロールも含めて、
  依然としてdocument内の絶対位置を返す事に、注目してください。
</span>

<span>
  ページをスクロールした状態での動作も確認してみてください！

  styleでposition指定されたDIVであるため、
  クリックの戻り値は、この要素の左上隅の角の相対になります。
  layerX、Yと異なり、pageX\pageYのプロパティは、ページのスクロールも含めて、
  依然としてdocument内の絶対位置を返す事に、注目してください。
</span>

</div>

<div id="d3">
<form name="form_coords" id="form1">
 親要素のID: <input type="text" name="parentId" size="7" /><br />
 pageX:<input type="text" name="pageXCoords" size="7" />
 pageY:<input type="text" name="pageYCoords" size="7" /><br />
 layerX:<input type="text" name="layerXCoords" size="7" />
 layerY:<input type="text" name="layerYCoords" size="7" />
</form>
</div>

<script>
function showCoords(evt){
  var form = document.forms.form_coords;
  var parent_id = evt.target.parentNode.id;
  form.parentId.value = parent_id;
  form.pageXCoords.value = evt.pageX;
  form.pageYCoords.value = evt.pageY;
  form.layerXCoords.value = evt.layerX;
  form.layerYCoords.value = evt.layerY;
}

//初期処理
document.body.onmousedown = function(event){
  showCoords(event);
}
</script>

</body>
</html>

注意事項

layerXは、position指定された要素内部でイベントが発生していないのであれば、ページのスクロールを考慮した、document全体の相対位置の値を返します。

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

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