Solución:
offsetX/offsetY son una prolija extensión de Microsoft para los objetos de evento del mouse y significan la posición del puntero del mouse con respecto al elemento de destino. Lamentablemente, Firefox no los implementa, y hay discordancia entre los otros navegadores sobre cuál debería ser el punto de origen: IE cree que es el contenido caja, mientras que Chrome, Opera y Safari relleno box (que tiene más sentido, ya que es el mismo origen de elementos absolutamente posicionados).
layerX/layerY son propiedades de MouseEvent objetos definidos por navegadores basados en Gecko (Firefox et al.). Algunos dicen que son sustitutos de offsetX/offsetY – Ellos no están. Son la posición del mouse con respecto al “elemento posicionado más cercano”, es decir, un elemento cuyo position la propiedad de estilo no es static. Ese no es el elemento objetivo si está posicionado estáticamente.
Son compatibles con Chrome y Opera, pero (layerX/layerY) están en desuso y pronto se eliminarán. Así que olvídate de ellos.
LayerX y LayerY Recupera la coordenada x, la coordenada y, respectivamente, del puntero del mouse en relación con la esquina superior izquierda del elemento ancestro posicionado más cercano del elemento que dispara el evento.
OffsetX, OffsetY establece o recupera la coordenada x, las coordenadas y del puntero del mouse en relación con la esquina superior izquierda del elemento offsetParent del elemento que dispara el evento. El elemento Offset Parent devuelve una referencia al elemento ancestro más cercano en la jerarquía DOM a partir del cual se calcula la posición del elemento actual.