DOM

：

：

UIEvent.layerX プロパティ

　編集：2022.10.05 by T.A.

[Edge]。読取専用 非標準。→、

非標準： この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

UIEvent で現在のレイヤーに関連する水平座標を数値で返します。

このプロパティは、ページのスクロールを考慮し、文書全体からの相対値を返します¶。ただし、位置指定された要素内でイベントが発生した場合は、位置指定された要素の左上からの相対値が返されます¶。

構文
UIEvent.layerX
値

整数値。マウス イベントが発生したときのマウス ポインターのピクセル単位の X 座標です。

例

HTML： 

<SPAN id=IdTest1>[ここでクリックしてみて…]</SPAN><BR>
<TABLE id=IdTest2>
 <TR><TD>[ここでクリックしてみて…]
</TABLE>
<SPAN id=IdLog></SPAN>

JavaScript： 

function Job(eve){ //clickイベントの処理：
  D=eve;
  IdLog.innerHTML=eve.layerX +", "+ eve.layerY; //表示。
}
IdTest1.onclick=Job;     //イベント割り当て。
IdTest2.onclick=Job;     //イベント割り当て。

文書上での座標のようです。おそらく相対でもない。

相対か？

HTML： 

<SPAN id=IdTest style="position:absolute; left:-10px; top:-10px; font-size:40px;">■</SPAN>
<SPAN id=IdLog></SPAN>

当文書の左上部に表示されます。

JavaScript： 

function Job(eve){ //clickイベントの処理：
  D=eve; //＝[object]：[object PointerEvent]。当文書の左上に表示されているSPAN要素をクリックした。

詳細	//isTrusted＝[boolean]：true
	//pointerId＝[number]：1
	//width＝[number]：1
	//height＝[number]：1
	//pressure＝[number]：0
	//tiltX＝[number]：0
	//tiltY＝[number]：0
	//azimuthAngle＝[number]：0
	//altitudeAngle＝[number]：1.5707963267948966
	//tangentialPressure＝[number]：0
	//twist＝[number]：0
	//pointerType＝[string]：mouse
	//isPrimary＝[boolean]：false
	//getCoalescedEvents＝[function]：function getCoalescedEvents() { [native code] }
	//getPredictedEvents＝[function]：function getPredictedEvents() { [native code] }
	//screenX＝[number]：216
	//screenY＝[number]：88
	//clientX＝[number]：9
	//clientY＝[number]：13
	//ctrlKey＝[boolean]：false
	//shiftKey＝[boolean]：false
	//altKey＝[boolean]：false
	//metaKey＝[boolean]：false
	//button＝[number]：0
	//buttons＝[number]：0
	//relatedTarget＝[object]：null
	//pageX＝[number]：9
	//pageY＝[number]：13
	//x＝[number]：9
	//y＝[number]：13
	//offsetX＝[number]：20
	//offsetY＝[number]：23
	//movementX＝[number]：0
	//movementY＝[number]：0
	//fromElement＝[object]：null
	//toElement＝[object]：null
	//layerX＝[number]：19
	//layerY＝[number]：23
	//getModifierState＝[function]：function getModifierState() { [native code] }
	//initMouseEvent＝[function]：function initMouseEvent() { [native code] }
	//view＝[object]：[object Window]
	//detail＝[number]：1
	//sourceCapabilities＝[object]：[object InputDeviceCapabilities]
	//which＝[number]：1
	//initUIEvent＝[function]：function initUIEvent() { [native code] }
	//type＝[string]：click
	//target＝[object]：[object HTMLSpanElement]
	//currentTarget＝[object]：null
	//eventPhase＝[number]：0
	//bubbles＝[boolean]：true
	//cancelable＝[boolean]：true
	//defaultPrevented＝[boolean]：false
	//composed＝[boolean]：true
	//…


  IdLog.innerHTML=eve.layerX +", "+ eve.layerY; //記録表示。
}
IdTest.onclick=Job; //イベント割り当て。

文書のマイナスの位置をクリックすることってあるのだろうか？。

テスト