¿Qué sustituto deberíamos usar para layerX/layerY ya que están en desuso en webkit?

Question

En cromo canario, layerX y layerY están en desuso, pero ¿qué deberíamos usar en su lugar?

He encontrado offsetX pero no funciona con Firefox. Así que para obtener layerX sin advertencia en webkit, lo he hecho:

var x = evt.offsetX || evt.layerX, 
    y = evt.offsetY || evt.layerY; 

¡Pero esto parece bastante complejo! ¿Es eso realmente lo que debemos hacer para que layerX funcione en todos los navegadores?

Answer 1

Aquí es una función para calcular layerX layerY de un evento de clic:

function getOffset(evt) { 
    var el = evt.target, 
     x = 0, 
     y = 0; 

    while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) { 
    x += el.offsetLeft - el.scrollLeft; 
    y += el.offsetTop - el.scrollTop; 
    el = el.offsetParent; 
    } 

    x = evt.clientX - x; 
    y = evt.clientY - y; 

    return { x: x, y: y }; 
} 

Muchas gracias a Stu Cox para señalar las dos funciones que se utilizan para hacer éste.

Answer 2

Los únicos razonablemente maneras transversal del navegador para detectar la posición del ratón son clientX/clientX (con relación a la ventana), screenX/screenY (con relación a toda la pantalla) y pageX/pageY (con relación al documento, pero no se admite en IE8 y por debajo)

Quirksmode sugiere esto para estandarizar a un valor relativo a-documento:

function doSomething(e) { 
    var posx = 0; 
    var posy = 0; 
    if (!e) var e = window.event; 
    if (e.pageX || e.pageY)  { 
     posx = e.pageX; 
     posy = e.pageY; 
    } 
    else if (e.clientX || e.clientY)  { 
     posx = e.clientX + document.body.scrollLeft 
      + document.documentElement.scrollLeft; 
     posy = e.clientY + document.body.scrollTop 
      + document.documentElement.scrollTop; 
    } 
    // posx and posy contain the mouse position relative to the document 
    // Do something with this information 
} 

entonces se podría utilizar this trabajo fuera de su posición con respecto a su elemento.

Horrible Lo sé, pero internet es un lugar horrible.

Answer 3

¿Estás seguro de que layerX y layerY están en desuso?

En mi experiencia todavía están allí, sobre todo debido a las propiedades relacionadas offsetX y offsetY no se implementan en otros navegadores:

Hay mucha discusión pasando en WebKit y Mozilla embargo:

https://bugs.webkit.org/show_bug.cgi?id=21868 y https://bugzilla.mozilla.org/show_bug.cgi?id=674292 En pocas palabras, ambos son un poco inconclusos si quitar o no, por lo que por ahora no lo eliminaron.

later Las versiones de IE proporcionan un alias que se correlaciona con las propiedades xey (no puedo publicar ningún enlace adicional por desbordamiento de pila, debido a la falta de 'reputación').