Encuentra la posición del mouse en relación con el elemento

Resuelto Ben Shelock asked hace 14 años • 30 respuestas

Quiero hacer una pequeña aplicación de pintura usando lienzo. Entonces necesito encontrar la posición del mouse en el lienzo.

Ben Shelock avatar Jul 13 '10 11:07 Ben Shelock
Aceptado

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>
Expandir fragmento

JSFiddle del ejemplo completo

anytimecoder avatar Feb 08 '2017 11:02 anytimecoder

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() .

sparkyspider avatar May 03 '2012 10:05 sparkyspider