O JavaScript não possui um objeto de mouse e depende de um objeto de evento poderoso para obter coordenadas do mouse.
Ao ouvir o mousemove do documento, podemos obter a posição do mouse em tempo real.
mas! ! Existem muitos atributos relacionados ao mouse no evento, o que é muito emocionante! do seguinte modo:
| Event.layerx | Event.Layery |
| Event.ClientX | Event.Clienty |
| Event.Pagex | Event.Pagey |
| Event.OffSetX | Event.offsety |
| Event.Screenx | Event.Screeny |
| event.x | Event.Y |
Um total de 6 grupos!
Além disso, suas diferenças não são óbvias e os navegadores não são compatíveis!
O objetivo deste artigo é esclarecer suas diferenças e selecionar aquelas que não são recomendadas.
Código de teste
Execute o seguinte código diretamente:
A cópia do código é a seguinte:
<! Doctype html> <r />
<html xmlns = "http://www.w3.org/1999/xhtml"> <r/>
<head> <r />
<meta charset = "utf-8" /> </p>
<estilo>
corpo {posição: relativa;}
div {Min-Hight: 300px; Background-Color: #eee;}
#jg {direita: 0; topo: 10px; Posição: fixado; Background-Color: #f00;}
</style>
<p> </head> <r />
<Body> <r />
<span id = "jg"> mostrar resultados </span> <r />
<input type = "button" value = "a button" /> </p>
<div> div na tela </div>
<div style = "altura: 1000px; largura: 2000px; fundo: #ddd;"> muito alto e amplo. . . </div>
<div> Div </div> fora da tela
<p> </body> <r />
<Cript>
var jg = document.getElementById ('jg');
document.onMousEmove = function (e) {
e = e || Window.Event;
jg.innerhtml = 'camada:'+e.layerx+
', Layery:'+e.layery+
', <br/> clientx:'+e.clientX+
', Cliente:'+e.clienty+
', <br/> PageX:'+E.Pagex+
', Pagey:'+E.Pagey+
', <br/> OFFSETX:'+E.OffSetX+
', Offsety:'+E.Offsety+
', <br/> Screenx:'+e.screenx+
', Screeny:'+E.Screeny+
', <br/> x:'+e.x+
', y:'+EY;
}
< /script> <r />
</html>
Durante o teste, encontrei uma ferramenta mágica: Chrome (Google Chrome) e IE9 são compatíveis com todos os atributos acima! É muito conveniente compará -los.
Após a comparação, os resultados são os seguintes:
Definição de cada atributo
ClientX e Y são as coordenadas do mouse em relação à viewport do navegador (ou seja, a parte fora da barra de rolagem é ignorada); Todos os navegadores suportam.
ScreenX e Y são as coordenadas do mouse em relação à esquerda (borda superior) de toda a tela, que está basicamente fora de contato com o documento; é totalmente compatível.
Offsetx e Y são as coordenadas do mouse em relação ao objeto atualmente apontado. Quando o mouse aponta para o botão neste momento, o offsetx é relativo a esse botão; Firefox não suporta
x e y, camada e y no mesmo navegador padrão, são atributos que podem ser usados para substituir o Layerx no IE.
PageX e Y são as coordenadas do mouse em relação à esquerda (borda superior) de toda a página, incluindo fora da viewport; IE7 e 8 não o apoiam.
Pontos -chave: camada e layery
Layerx e Y são novos atributos lançados pelos navegadores padrão, e o IE9 também os suporta. Ele pode ser usado em vez de Offsetx e Y. No entanto, sua definição é: as coordenadas do elemento com informações de posicionamento em relação ao elemento apontador atual. Este "posicionado" refere-se a um atributo CSS (ou seja, não estático) que possui posicionamento sem defesa.
Se o elemento atualmente apontado estiver posicionado, Layerx e Y retornarão as coordenadas em relação a esse elemento; Caso contrário, verifique a etiqueta pai deste elemento; Se ainda não houver posicionamento, continue; Até o elemento raiz - nó html.
Portanto, no Firefox, se você deseja compensar o valor, deve adicionar informações de posição de posição!
Resumo da compatibilidade:
1. O Firefox não suporta atributos Offsetx, Offsety e X, Y, mas eles podem ser substituídos pela Layerx;
2. X e Y no IE são equivalentes a Layerx e Layery em Firefox & Chrome;
3. O limite do documento do IE7 e 8 fica a 2px para longe do limite da janela do navegador, então o ScreenX tem uma distância mínima de 2px quando a janela é maximizada;
4. Embora o layerx e y no IE9 tenham valores, eles são inexplicavelmente incorretos. Eles parecem estar relacionados à tag HTML. Por exemplo, no meu código de exemplo, arraste a barra de rolagem para a direita e o mouse se move lentamente do espaço em branco para o grande div. Neste momento, a diferença entre a mais à direita e a mais à direita da primeira div também será incluída no Layerx. . . Como há cada vez mais elementos no final, mais complicado o cálculo é; enquanto a camada de Firefox e Chrome não tem esse problema. Portanto, não use o Layerx no IE9.
5. No Chrome, embora X e Y tenham valores, eles são exatamente os mesmos que ClientX e Y! Portanto, não é recomendável usar os atributos x, y.
Remédio de compatibilidade
Nos navegadores padrão, a posição e o evento.layerx podem ser usados para implementar o atributo Event.OffSetX;
Não há página ou página no IE7. Você só pode usar document.documentElement.scrollleft+event.clientx para encontrá -lo.
Portanto, um de x, y ou offsetx e offsety no IE pode ser removido.