Este artigo apresenta principalmente a compilação de eventos de toque comum desenvolvidos pelo terminal móvel HTML5. Os objetos de evento dos eventos de toque estão basicamente correspondentes aos atributos da operação do mouse. Amigos que precisam podem se referir a ele.
Muitos novos eventos foram adicionados ao HTML5, mas como seus problemas de compatibilidade não são ideais e sua aplicação não é muito prática, eles são basicamente omitidos aqui. Compartilhamos apenas eventos com boa compatibilidade com aplicativos amplos. Vamos adicioná -los e compartilhá -los um após o outro, à medida que a situação de compatibilidade melhora no futuro. Os eventos que apresentarei a você hoje são principalmente eventos de toque: TouchStart, Touchmove e Toukend.
No começo, o Touch Events Touchstart, o Touchmove e o Toukend são eventos recém -adicionados para a versão iOS do navegador Safari para transmitir algumas informações aos desenvolvedores. Como o dispositivo iOS não possui um mouse nem um teclado, ao desenvolver páginas interativas da Web para navegadores de safári móveis, eventos de mouse e teclado no PC não são suficientes.
Quando o iPhone 3GS foi lançado, seu próprio navegador móvel Safari forneceu alguns novos eventos relacionados às operações de toque. O mesmo evento foi implementado pelo navegador no Android. Um evento de toque começará quando o usuário colocar o dedo na tela, quando deslizar na tela ou quando se afasta da tela. Os seguintes detalhes são explicados:
Evento TouchStart: acionado quando o dedo tocar na tela, ele acionará mesmo que um dedo já esteja colocado na tela.
Evento do Touchmove: gatilhos continuamente quando o dedo deslizar na tela. Durante este evento, o evento PreventDefault () chama pode impedir a rolagem.
Evento do Toukend: acionado quando o dedo sair da tela.
Evento do Touchcancel: acionado quando o sistema para de rastrear o toque. O documento não especifica o horário exato de partida deste evento, para que possamos adivinhar.
Todos os eventos acima borbulham e podem ser cancelados. Embora esses eventos de toque não sejam definidos na especificação DOM, eles são implementados de maneira compatível com DOM. Therefore, each touch event event object provides common attributes in mouse practice: bubbles (the type of bubble event), cancelable (whether the default action associated with the event can be canceled with the preventDefault() method), clientX (returns the horizontal coordinate of the mouse pointer when the event is triggered), clientY (returns the vertical coordinate of the mouse pointer when the event is triggered), screenX (returns the Coordenada horizontal do ponteiro do mouse quando o evento é acionado) e Screeny (retorna a coordenada vertical do ponteiro do mouse quando o evento é acionado). Além das propriedades DOM comuns, os eventos de toque também contêm os três atributos a seguir para rastrear o toque.
Toques: uma matriz de objetos de toque que representa a operação de toque rastreada atualmente.
TargetTouches: uma matriz de objetos de toque específicos para o destino do evento.
ChangeTouches: uma variedade de objetos de toque que representam o que mudou desde o último toque.
Cada objeto de toque contém as seguintes propriedades.
ClientX: toque na coordenada x do destino na viewport.
Cliente: toque na coordenada y do alvo na viewport.
Identificador: o ID exclusivo que identifica o toque.
PageX: toque na coordenada X do destino na página.
Pagey: toque na coordenada Y do alvo na página.
ScreenX: toque na coordenada x do alvo na tela.
Screeny: toque na coordenada Y do alvo na tela.
Alvo: tocando no alvo do nó DOM.
Cada ponto de toque contém as seguintes informações de toque (comumente usadas):
Identificador: um valor que identifica exclusivamente o dedo atual na sessão de toque. Geralmente, o número de fluxo a partir de 0 (Android4.1, UC)
Alvo: elemento DOM, é o alvo alvo da ação.
PageX/PageX/ClientX/Clienty/Screenx/Screeny: Um valor, onde a ação ocorre na tela (a página contém a distância de rolagem, o cliente não contém a distância de rolagem, a tela é baseada na tela).
RADIUSX/RADIUSY/ROTATIONANGE: Desenhe uma elipse aproximadamente equivalente à forma de um dedo, dois raios e ângulo de rotação da elipse, respectivamente. O navegador de teste preliminar não o suporta, mas felizmente as funções não são comumente usadas, para que todos sejam bem -vindos ao feedback.
Pequenos exemplos de operações de JavaScript:
JavaScript Code Copy Content para a área de transferência