Comentário: A maioria das interações nos telefones celulares é alcançada através do toque; portanto, para sites interativos da tela de toque, os eventos de toque são muito importantes. Aqui, apresentamos vários eventos de toque que são mais populares. Você pode testar este evento na maioria dos navegadores modernos. Amigos interessados podem aprender sobre isso.
PrefácioQual é a diferença entre um site de tela sensível ao toque e um site tradicional de PC? As mudanças nos métodos de interação são as primeiras a serem afetadas. Por exemplo, o evento de cliques que usamos geralmente é tão impotente em dispositivos de tela de toque.
A maioria das interações no telefone celular é alcançada através do toque; portanto, os eventos de toque são muito importantes para sites interativos com telas de toque.
A Apple introduziu a API do evento Touch no iOS 2.0 e o Android está alcançando esse padrão de fato para restringir a lacuna. Recentemente, um grupo de trabalho do W3C está trabalhando juntos para formular essa norma de eventos de toque.
especificação
Aqui, apresentamos vários eventos de toque que são mais populares. Você pode testar este evento na maioria dos navegadores modernos (deve ser um dispositivo de tela sensível ao toque):
Touchstart: acionado quando o toque começa
Touchmove: acionado quando o dedo desliza na tela
Toukend: acionado quando o toque termina
Cada evento de toque inclui três listas de toque, cada lista contém uma série correspondente de pontos de toque (usados para implementar multi-touch):
Toques: uma lista de todos os dedos atualmente localizados na tela.
TargetTouches: Lista de dedos localizados no elemento DOM atual.
Toques alterados: lista de dedos envolvendo o evento atual.
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.
Com essas informações, podemos fornecer aos usuários um feedback diferente com base nessas informações de evento.
Abaixo, mostrarei uma pequena demonstração, arrasto de dedo único usando o TouchMove:
/*Arraste com um dedo único*/
var obj = document.getElementById ('id');
obj.addeventListener ('touchmove', função (evento) {
// se houver apenas um dedo na posição deste elemento
if (event.targettouches.length == 1) {
event.preventDefault (); // bloqueia o evento padrão do navegador, importante
var touch = event.TargetTouches [0];
// Coloque o elemento onde está seu dedo
obj.style.left = touch.pagex-50 + 'px';
obj.style.top = touch.pagey-50 + 'px';
}
}, false);
Dicas sobre as quatro pseudo-classes de uma tag nos dispositivos de tela de toque:
Todos sabemos que as quatro pseudo-classes do link A Tag, visitadas, ativas e o hover são projetadas para eventos de cliques; portanto, tente não usá-los em sites de tela de toque. A maioria dos testes também não está disponível. Mas aqui está um pequeno truque sobre pairar. Quando você clica em um botão, o botão permanecerá no estado de pairar. Neste momento, o CSS que você definiu com base nesta classe pseudo-classe também funciona até que você clique em outro botão com o dedo, o estado de pairar será transferido para outro botão. Usando isso, podemos fazer alguns pequenos efeitos. Esse truque ainda está disponível na maioria dos navegadores.
Os ideais estão cheios, a realidade é magra!
Embora o W3C esteja pronto para o Multi-Touch, infelizmente, poucos navegadores suportam recursos de vários toques, especialmente os navegadores em plataformas Android, o que faz com que a lista de dedo introduzida acima se torne uma conversa vazia. Capturar dois pontos de contato levará diretamente à falha do toque! Felizmente, o navegador Safari que vem com dispositivos iOS pode suportar esse recurso, o que nos torna cheios de esperança para o futuro. Afinal, fomos presos pela operação de ponto único do mouse por muito tempo. Como é emocionante usar mais um site!