Encuentra la posición del mouse en relación con el elemento
Quiero hacer una pequeña aplicación de pintura usando lienzo. Entonces necesito encontrar la posición del mouse en el lienzo.
Como no encontré una respuesta sin jQuery que pudiera copiar/pegar, aquí está la solución que utilicé:
document.getElementById('clickme').onclick = function(e) {
// e = Mouse click event.
var rect = e.target.getBoundingClientRect();
var x = e.clientX - rect.left; //x position within the element.
var y = e.clientY - rect.top; //y position within the element.
console.log("Left? : " + x + " ; Top? : " + y + ".");
}#clickme {
margin-top: 20px;
margin-left: 100px;
border: 1px solid black;
cursor: pointer;
}<div id="clickme">Click Me -<br>
(this box has margin-left: 100px; margin-top: 20px;)</div>JSFiddle del ejemplo completo
Para personas que usan JQuery:
A veces, cuando tienes elementos anidados, uno de ellos con el evento adjunto, puede resultar confuso entender qué ve tu navegador como padre. Aquí puede especificar qué padre.
Se toma la posición del mouse y luego se resta de la posición de desplazamiento del elemento principal.
var x = evt.pageX - $('#element').offset().left;
var y = evt.pageY - $('#element').offset().top;
Si está intentando obtener la posición del mouse en una página dentro de un panel de desplazamiento:
var x = (evt.pageX - $('#element').offset().left) + self.frame.scrollLeft();
var y = (evt.pageY - $('#element').offset().top) + self.frame.scrollTop();
O la posición relativa a la página:
var x = (evt.pageX - $('#element').offset().left) + $(window).scrollLeft();
var y = (evt.pageY - $('#element').offset().top) + $(window).scrollTop();
Tenga en cuenta la siguiente optimización del rendimiento:
var offset = $('#element').offset();
// Then refer to
var x = evt.pageX - offset.left;
De esta manera, JQuery no tiene que buscar #elementcada línea.
Actualizar
Hay una versión más nueva, solo de JavaScript, en una respuesta de @anytimecoder; consulte también la compatibilidad del navegador con getBoundingClientRect() .
