Hola tejo la solución a continuación, no creo que necesite mayor explicación ya que es bastante simple, pero si no es así por favor dímelo para poder ser realmente de ayuda ;)
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
obtenerCoordenadasOnmousemove = function ( event ) {
document.getElementById('info-onmousemove').innerHTML = 'on mouse move: ' + obtenerPosClickX(event, 'cuadrado') + ' X ' + obtenerPosClickY(event, 'cuadrado');
}
obtenerCoordenadasOnclick = function ( event ) {
document.getElementById('info-onclick').innerHTML = 'on click: ' + obtenerPosClickX(event, 'cuadrado') + ' X ' + obtenerPosClickY(event, 'cuadrado');
}
obtenerPosClickX = function ( event , id ) {
var cursorX = event.clientX;
var ubicacionX = document.getElementById( id ).offsetLeft;
var posicionInternaX = cursorX - ubicacionX + window.scrollX;
return posicionInternaX;
}
obtenerPosClickY = function ( event , id ) {
var cursorY = event.clientY;
var ubicacionY = document.getElementById( id ).offsetTop;
var posicionInternaY = cursorY - ubicacionY + window.scrollY;
return posicionInternaY;
}
</script>
<style>
#cuadrado {
height: 300px;
width: 300px;
background: #009933;
}
</style>
</head>
<body>
<div id="cuadrado" onmousemove="obtenerCoordenadasOnmousemove(event)" onclick="obtenerCoordenadasOnclick(event)"></div>
<div id="info-onmousemove">on mouse move: </div>
<div id="info-onclick">on click: </div>
</body>
</html>
Algo para tener muy en cuenta, este código te da la ubicación del click y el mouse dentro del div, pero también existen otras posibilidades como la ubicación en pantalla , en el body, y teniendo en cuenta el scroll o no...