Screeny
Deslocamento do mouse do canto superior esquerdo da tela do monitor
Pagey
O deslocamento do mouse no canto superior esquerdo da página (seu valor não será afetado pela barra de rolagem)
Esta propriedade não é suportada no IE9
Mas você pode escrever algum código para calculá -lo. Implementação no jQuery:
A cópia do código é a seguinte:
// Calcule PageX/Y se ausente e ClientX/Y disponível
if (event.pagex == null && original.clientx! = null) {
eventDoc = event.target.ownerdocument || documento;
doc = eventdoc.documentElement;
corpo = eventdoc.body;
event.pagex = original.clientx + (doc && doc.scrollleft || body && body.scrollLeft || 0) - (doc && doc.clientleft ||| corpora && body.clientleft || 0);
event.pagey = original.clienty + (doc && doc.Scrolltop || body && body.scrolltop || 0) - (doc && doc.clienttop || body && body.clienttop || 0);
}
Basta implementá -lo simplesmente.
O deslocamento do mouse em relação à viewport do navegador, além da altura oculta da barra de rolagem do documento menos o cliente do cliente.
A cópia do código é a seguinte:
var pagey = event.clienty +document.documentElement. scrolltop-cocument.documentElement.clienttop
Por que subtrair document.documentElement.clienttop
Este é o deslocamento do documento específico do navegador no IE8. Mesmo se o HTML estiver definido como 0, o preenchimento e a margem do corpo não afetarão seu valor.
Testado no IE7, obtenha
A cópia do código é a seguinte:
document.documentElement.clienttop -> 2px document.documentElement.clientleft -> 2px
document.bocy.clienttop -> 0px document.body.clientleft -> 0px
Cliente
Deslocamento do mouse do canto superior esquerdo da visualização do navegador
Preste atenção à diferença entre cliente e página. O valor da cliente é equivalente ao Pagey quando não há barra de rolagem na página.
------------------------------------ Segmentação -----------------------------------------------
layery
Se o estilo de posição de um elemento não for a estática padrão, dizemos que esse elemento possui atributos de posicionamento.
Encontre o elemento mais próximo com os atributos de posicionamento no elemento que atualmente aciona o evento do mouse e seus elementos ancestrais, calcule o valor de deslocamento do mouse a partir dele para encontrar o ponto diplomático no canto superior esquerdo da borda do elemento como ponto relativo. Se um elemento com o atributo de posicionamento não puder ser encontrado, o deslocamento será calculado em relação à página atual, o que é equivalente ao Pagey no momento.
Esse atributo não é suportado no IE9, mas pode ser substituído por seu deslocamento exclusivo.
Offsety
Ou seja, propriedades específicas
A diferença entre deslocamento e layery é que, ao calcular o valor de deslocamento, o primeiro é relativo ao ponto de interseção interno no canto superior esquerdo da borda do elemento. Portanto, quando o mouse está na borda do elemento, o valor de deslocamento é um valor negativo. Além disso, Offsety não se importa se o elemento que desencadeia o evento possui atributos de posicionamento. Ele sempre calcula o valor de deslocamento em relação ao elemento que aciona o evento.
Dada a diferença entre layery e offsety, você deve prestar atenção ao uso de dois compatíveis.
1. O elemento que desencadeia o evento deve definir o atributo de posicionamento.
2. Quando o elemento possui o topo da borda superior, o layery tem mais um valor de largura de borda do que o valor da Offsety.
A cópia do código é a seguinte:
// O elemento.BERDERTOPWIDTH aqui deve ser a largura da borda superior do elemento realmente calculado.
var borderTopwidth = window.getComputedStyle? window.getComputedStyle (elemento, null) .Bertopwidth: element.currentStyle.bordertopwidth;
var offsety = event.offsety || (event.layery + bordertopwidth);
Através das propriedades de layery e offsety, é muito conveniente calcular o deslocamento do mouse em relação ao elemento de evento do mouse ligado, o que é muito útil em alguns momentos.
Aqui falamos sobre o atributo offset da direção vertical do mouse. O deslocamento na direção horizontal é semelhante, por isso não discutiremos mais isso.
O exposto acima é tudo sobre este artigo, espero que gostem.