Posição do Cursor em um Elemento

Problema

Em alguns casos, desejamos descobrir a posição do cursor sobre um elemento, mas não há uma maneira direta para tal, ou se há eu não encontrei na internet.

Exemplo

Podemos imaginar por exemplo como alterar um canvas com base na posição do clique do mouse sobre o mesmo, ou mesmo quando o mouse passa por cima.

Introdução ao JavaScript

JavaScript é uma linguagem de programação baseada em objetos e utilizada em páginas da Web para controlar os elementos e tornar a navegação uma experiência dinâmica e atrativa.

JavaScript - Eventos

Em JavaScript, os eventos são objetos que armazenam atributos referentes a um determinado acontecimento (evento), os eventos podem adquirir informações do Teclado e do Mouse.

JavaScript - Eventos - Posição do Cursor do Mouse

Para saber a posição do cursor do mouse em um determinado evento, usa-se as propriedades clientX e clientY.

Estas propriedades são atributos do objeto evento. Elas retornam números inteiros, as coordenadas X e Y em pixels em relação ao conto esquerdo-superior da tela do navegador.

JavaScript - Janela - Rolagem da página 

É possível determinar também quantos pixels a página foi rolada. Isso é importante para determinar a posição absoluta do cursor, e não a posição relativa ao canto superior-esquerdo, para poder então processar com a posição absoluta do elemento e descobrir em qual coordenada do elemento o cursor está.

Para saber quantos pixels a página foi rolada, usa-se o pageXOffset e o pageYOffset.

JavaScript - Elemento - Posição de desvio

Para saber a posição de um elemento em relação ao conto superior-esquerdo do elemento em que ele está  inserido, usa-se o offsetLeft e o offsetTop.

O elemento em questão não pode setar dentro de nenhum elemento de posição significativamente alterada através de CSS, caso contrário, o resultado estará distorcido, sendo relativo ao último elemento de posição alterada.

A função para descobrir a posição X é

function nX (evento, objeto){

return evento.clientX-(objeto.offsetLeft-pageXOffset); 

}

A função para descobrir a posição Y é

function nY (evento, objeto){

return evento.clientY-(objeto.offsetTop-pageYOffset); 

}