Este artigo descreve os eventos JavaScript na tela de toque. Compartilhe para sua referência. A análise específica é a seguinte:
1. Toque em eventos
OnTouchstart
OnTouchmove
OnTouchend
Atualmente, o OTouchCancel suporta esses 4 eventos de toque, incluindo o IE. Como as telas sensíveis ao toque também suportam o MouseEvent, sua ordem precisa ser observada: TouchStart → MouseOver → Mousemove → Mousedown → MouseUp → Click1
Exemplos são os seguintes:
/*** onTouchEvent*/var div = document.getElementById("div");//touchstart is similar to mousedowndiv.ontouchstart = function(e){//The touches attribute of the event is an array, where an element represents a touch point at the same moment, //Therefore you can get each touch point of multi-touch through touches// Since we only have a little touch, we directly point to [0]var touch = e.touches[0];//Get the coordinates of the current touch point, which is equivalent to clientX/clientYvar x = touch.clientX;var y = touch.clientY;};//touchmove is similar to mousemovediv.ontouchmove = function(e){//You can add preventDefault to touchstart and touchmove events to prevent touchDefault to prevent touch, //Browser zoom, rolagem, etc. E.PreventDefault ();}; // Toukend é semelhante ao mouseupdiv.ontouchup = function (e) {// nada a fazer};2. Os gestos de eventos de gesto referem-se ao uso de multi-touch para girar, esticar e outras operações, como ampliar e girar imagens e páginas da web. Um evento de gesto é acionado quando dois ou mais dedos são obrigados a tocar ao mesmo tempo. Uma coisa em que precisamos prestar atenção sobre a escala são as coordenadas de posição dos elementos: geralmente usamos o OffsetX, o GetBoundingClientRect e outros métodos para obter as coordenadas de posição dos elementos, mas nos navegadores móveis, a página é frequentemente escalada durante o uso, assim como as coordenadas das mudanças de elemento escalonado? A resposta é que existem diferenças. Use um cenário para ilustrar esse problema: após a página A ser carregada, o JavaScript recebe as coordenadas do elemento no documento como (100.100) e, em seguida, o usuário amplia a página. No momento, o JavaScript gera o elemento coordena novamente e ainda (100.100), mas a área de resposta do elemento na tela será compensada de acordo com a taxa de escala. Você pode abrir a demonstração do jogo de jogo de tijolos e, em seguida, amplie o zoom depois que a página estiver totalmente carregada. Neste momento, você descobrirá que, mesmo que o seu dedo toque fora da área de "toque aqui", você pode controlar a placa de bola porque a área está compensada. O deslocamento sempre existirá, a menos que a página seja atualizada ou o zoom seja restaurado.
/*** OngestureEvent*/var div = document.getElementById ("div"); div.ongestureChange = function (e) {// escala representa a escala de escala gerada pelo gesto. Menos que 1 está encolhendo e maior que 1 é ampliado. Originalmente 1Var Scale = e.Scale; // A rotação representa o ângulo do gesto de rotação, intervalo de valor [0,360], o valor positivo gira o sentido horário, valor negativo no sentido anti -horário var = e.rotation;};3. O detecção da gravidade da gravidade é mais simples, você só precisa adicionar um evento de troca de onorientação ao nó do corpo. Neste caso, o valor que representa a direção atual do telefone é obtido na propriedade Window.orientation. A lista de valor de Window.orientation é a seguinte:
0: consistente com a direção quando a página foi carregada pela primeira vez
-90: virado no sentido horário em 90 ° em relação à direção original
180: completou 180 °
90: girou 90 ° no sentido anti -horário. De acordo com meus testes, o Android 2.1 ainda não suporta a sensação de gravidade. O exposto acima são os eventos atuais da tela de toque. Esses eventos não foram incorporados ao padrão, mas foram amplamente utilizados. Eu tenho o Android 2.1, não testado em outros ambientes.
PS: Aqui fornecemos uma ferramenta on -line sobre eventos JS, que resume os tipos de eventos e funções de eventos comumente usados de JS:
Uma lista completa de eventos e funções JavaScript:
http://tools.vevb.com/table/javascript_event
Espero que este artigo seja útil para a programação JavaScript de todos.