getMousePositionRelativeFromEventTarget(e)

getMousePositionRelativeFromEventTarget(e)

by Laurens Maneschijn

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX -->

<p>Move your mouse to see its position.</p>

<div id="dummy">dummy</div>

<pre id="screen-log"></pre>

<pre id="screen-log2"></pre>

CSS

#dummy {
	display: inline-block;
	width: 100px;
	height: 100px;
	margin: 10px;
	padding: 10px;
	background: #eee;
}

JavaScript

let screenLog = document.querySelector('#screen-log');
let screenLog2 = document.querySelector('#screen-log2');
let dummy = document.querySelector('#dummy');
document.addEventListener('mousemove', logKey);
dummy.addEventListener('mousemove', logKey2);

function logKey(e) {
  screenLog.innerText = `
    Screen X/Y: ${e.screenX}, ${e.screenY}
    Client X/Y: ${e.clientX}, ${e.clientY}
`;
}

function logKey2(e) {
  var target = e.currentTarget || e.target;
	var rect = target.getBoundingClientRect();
	var pos = getMousePositionRelativeFromEventTarget(e);
  screenLog2.innerText = `
    Screen X/Y: ${e.screenX}, ${e.screenY}
    Client X/Y: ${e.clientX}, ${e.clientY}
    Offset X/Y: ${e.offsetX}, ${e.offsetY}
    misc   X/Y: ${e.clientX - rect.left}, ${e.clientY - rect.top}
    pos    X/Y: ${pos.x}, ${pos.y}
    rect   X/Y: ${rect.left}, ${rect.top}
`;
}

function getMousePositionRelativeFromEventTarget(e){
	// https://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
	if(typeof e.offsetX !== 'undefined') {
		return {x: e.offsetX, y: e.offsetY};
	}
	var target = e.currentTarget || e.target;
	if (target && target.getBoundingClientRect && (typeof e.clientX !== 'undefined')) {
		var rect = target.getBoundingClientRect();
		return {x: e.clientX - rect.left, y: e.clientY - rect.top};
	}
}