Solucionado
Olá. Segui a aula usando os offset, conforme ensinado, mas obtive o mesmo resultado com layerY e layerY.
Posso continuar pensando assim ou tem alguma restrição que não consegui perceber?
Trecho do código abaixo retornou o mesmo resultado.
var x0 = evento.pageX - tela.offsetLeft;
var y0 = evento.pageY - tela.offsetTop;
var x = evento.layerX;
var y = evento.layerY;
Fala, Luiz! Tudo bem contigo?
Desculpe a demora em dar um retorno!
Neste exercício não aparece a diferença entre eles, que na verdade são "quase" parecidos
offsetX / offsetY são uma extensão bacana da Microsoft para objetos de evento do mouse e significam a posição do ponteiro do mouse em relação ao elemento de destino. Infelizmente, eles não são implementados pelo Firefox, e há discordância entre os outros navegadores sobre qual deveria ser o ponto de origem: o Internet Explorer pensa que é a caixa de conteúdo, enquanto o Chrome, Opera e Safari caixa de preenchimento (o que faz mais sentido, já que é a mesma origem de elementos absolutamente posicionados).
layerX / layerY são propriedades de objetos do MouseEvent definidos por navegadores baseados no Gecko (Firefox). Alguns dizem que eles são substitutos de offsetX / offsetY e não são. Eles são a posição do mouse em relação ao "elemento posicionado mais próximo", ou seja, um elemento cuja propriedade de estilo de posição não é estática. Esse não é o elemento de destino se estiver estaticamente posicionado.
Eles são suportados pelo Chrome e Opera, mas os layerX / layerY estão depreciados e será removidos logo. A dica já é deixar de usá-los!
Espero ter contribuído, Luiz!
Um abraço e bons estudos
Grato pela resposta