Como usar a propriedade Mouseevent Pagey?

Como usar a propriedade Mouseevent Pagey?

Uma propriedade de evento chamada “Pagey”Mostra as coordenadas do eixo y quando o usuário move o mouse. Esta propriedade permite encontrar a localização do cursor para implementar recursos interativos, como menus suspensos ou dicas de ferramentas, etc. Essa propriedade pode ser útil em uma variedade de aplicações, como criar efeitos de rastreamento de mouse personalizados ou implementar a funcionalidade de arrastar e soltar.

Este guia demonstra como usar a propriedade Mouseevent Pagey.

Como usar a propriedade Mouseevent Pagey?

O "Pagey”A propriedade é utilizada para exibir as coordenadas do eixo y na tela em relação ao movimento do cursor do mouse. É medido em pixels a partir da borda superior da viewport. Siga as etapas abaixo para uma melhor explicação:

Etapa 1: Criação da estrutura

Dentro do pai “”Elemento, crie múltiplos“

" e "

”Tags nas quais as coordenadas são exibidas atribuindo“eu ia”Para cada elemento HTML:





Exemplo de propriedade da página do evento de mouse


Bem -vindo ao Linuxhint:


X coordenadas:


Y Coordenadas:


No final, selecione o “meu elemento”Id e aplique algumas propriedades do CSS para um processo de visualização melhor.

Etapa 2: Adicionando a propriedade Pagey

Dentro de "”Tag, adicione as seguintes propriedades. Essas propriedades devem ser adicionadas no final da página ou o código não funciona corretamente:

Uma explicação do trecho de código acima é declarada abaixo:

  • Primeiro, o elemento HTML é armazenado na variável acessando os IDs do elemento.
  • Então, a função é chamada no “mousemove"Ouvinte de eventos.
  • Depois disso, a variável chamada “Pagey" e "PageX" é criado. Então, essas variáveis ​​são utilizadas com “evento.Pagey" e "evento.PageXPropriedades, respectivamente. Esses valores obtêm as coordenadas do eixo y e x, respectivamente.
  • No final, essas variáveis ​​são exibidas na página da web acessando o “id "do" span”Elementos.

Depois de executar o trecho de código acima, a saída se parece com a seguinte:

A saída acima exibe que as coordenadas são exibidas na página da web em relação ao movimento do cursor.

Conclusão

O "Pagey”Propriedade recebe a coordenada do cursor no movimento do mouse sobre o elemento contendo selecionado. Para fazer funcionar, use o “mousemove”O ouvinte do evento que chama a função quando o mouse se move sobre o elemento div selecionado. E dentro dele utiliza o “evento.Pagey”Propriedade para obter as coordenadas do eixo y. Este guia demonstrou como usar a propriedade Mouseevent Pagey.