Nos dispositivos de tela sensível ao toque, alguns gestos relativamente básicos precisam ser implementados pelo encapsulamento secundário dos eventos de toque.
O Zepto é uma biblioteca de classes com taxas de uso relativamente altas em dispositivos móveis, mas alguns eventos simulados por seu módulo de toque têm alguns problemas de compatibilidade, como eventos de TAP com bugs de penetração de eventos em alguns dispositivos Android e outros tipos de eventos também têm problemas de compatibilidade mais ou menos.
Então, eu simplesmente encapsulei esses eventos de gestos comumente usados por mim. Como não há muitos dispositivos reais para testar, pode haver alguns problemas de compatibilidade. O código a seguir é testado apenas em alguns navegadores mais comuns no iOS 7 e Andorid 4.
Toque no evento
O evento TAP é equivalente ao efeito de clique no navegador do PC. Embora o evento de cliques ainda esteja disponível em dispositivos de tela de toque, haverá alguns atrasos no clique em muitos dispositivos. Se você deseja responder rapidamente aos eventos "clicar", precisará usar o evento Touch para alcançá -lo.
A cópia do código é a seguinte:
var starttx, startty;
element.addeventListener ('touchstart', função (e) {
var toques = e.ToCouches [0];
starttx = touches.clientx;
startTy = touches.clienty;
}, false);
Element.addeventListener ('Toukend', função (e) {
var touches = e.ChangedTouches [0],
endtx = touches.clientx,
endty = touches.clienty;
// Em alguns dispositivos, os eventos de toque são mais sensíveis, resultando em uma pequena mudança nas coordenadas do evento ao pressionar e liberar o dedo.
if (math.abs (starttx - endtx) <6 && math.abs (startty - endty) <6) {
console.log ('Evento de torneira de incêndio');
}
}, false);
Evento Doubletap
O evento Doubletap é um evento que é acionado quando o dedo toca a tela duas vezes no mesmo intervalo de posição e em um tempo muito curto. Em alguns navegadores, o evento Doubletap seleciona o texto. Se você não deseja selecionar o texto, poderá adicionar o atributo CSS do Usuário-Select: Nenhum ao elemento.
A cópia do código é a seguinte:
var istocouhend = false,
última hora = 0,
lasttx = nulo,
lastty = null,
FirstTouchend = True,
corpo = document.body,
DTAPTIMER, STARTTX, StartTy, StartTime;
element.addeventListener ('touchstart', função (e) {
if (dtaptimer) {
ClearTimeout (DTAPTIMER);
dtappiMer = nulo;
}
var toques = e.ToCouches [0];
starttx = touches.clientx;
startTy = touches.clienty;
}, false);
Element.addeventListener ('Toukend', função (e) {
var touches = e.ChangedTouches [0],
endtx = touches.clientx,
endty = touches.clienty,
agora = date.now (),
duração = agora - última hora;
// Primeiro, verifique se um único evento de toque pode ser acionado
if (math.abs (starttx - endtx) <6 && math.abs (starttx - endtx) <6) {
// Verifique se o intervalo entre as duas torneiras está dentro de 500 milissegundos
if (duração <301) {
// A posição desta torneira e a posição da última torneira permitem erros dentro de um determinado intervalo
if (lasttx! == null &&
Math.abs (lasttx - endtx) <45 &&
Math.abs (lastty - endty) <45) {
FirstTouchend = true;
lasttx = lastty = null;
console.log ('Evento de Tap Double Tap');
}
}
outro{
lasttx = endtx;
lastty = endty;
}
}
outro{
FirstTouchend = true;
lasttx = lastty = null;
}
última hora = agora;
}, false);
// O dedo bate na tela muito rápido no iOS Safari.
// Há uma certa chance de que os eventos TouchStart e Toukend não sejam respondidos à segunda vez
// Ao mesmo tempo, o toque do dedo não acionará o clique
if (~ Navigator.UserAgent.TolowerCase (). Indexof ('iPhone OS')) {
body.addeventListener ('touchstart', função (e) {
startTime = date.now ();
}, verdadeiro );
body.AddeventListener ('Toukend', função (e) {
var nolongtap = date.now () - starttime <501;
if (FirstTouchend) {
FirstTouchend = false;
if (nolongtap && e.target === element) {
dtaptimer = setTimeout (function () {
FirstTouchend = true;
lasttx = lastty = null;
console.log ('Evento de Tap Double Tap');
}, 400);
}
}
outro{
FirstTouchend = true;
}
}, verdadeiro );
// O evento de clique não será acionado quando o dedo torne a tela várias vezes no iOS.
element.addeventListener ('clique', função (e) {
if (dtaptimer) {
ClearTimeout (DTAPTIMER);
dtappiMer = nulo;
FirstTouchend = true;
}
}, false);
}
Evento Longtap
O evento Longtap é um evento que é acionado quando o dedo segura a tela por um longo tempo e permanece inalterado.
A cópia do código é a seguinte:
var starttx, startty, ltaptimer;
element.addeventListener ('touchstart', função (e) {
if (ltaptimer) {
ClearTimeout (LTAPTIMER);
ltappiMer = nulo;
}
var toques = e.ToCouches [0];
starttx = touches.clientx;
startTy = touches.clienty;
ltaptimer = setTimeout (function () {
console.log ('Fire Long Tap Event');
}, 1000);
E.PreventDefault ();
}, false);
element.addeventListener ('touchmove', função (e) {
var toques = e.ToCouches [0],
endtx = touches.clientx,
endty = touches.clienty;
if (ltaptimer && (math.abs (endtx - starttx)> 5 || math.abs (endty - startty)> 5)) {
ClearTimeout (LTAPTIMER);
ltappiMer = nulo;
}
}, false);
Element.addeventListener ('Toukend', função (e) {
if (ltaptimer) {
ClearTimeout (LTAPTIMER);
ltappiMer = nulo;
}
}, false);
Evento de deslizamento
O evento de deslizamento é um evento acionado quando o dedo desliza na tela. É dividido em swipeleft (esquerda), swiperight (à direita), deslizamento (para cima) e swipedown (para baixo).
A cópia do código é a seguinte:
var ISTOUCHMOVE, STARTTX, STARTTY;
element.addeventListener ('touchstart', função (e) {
var toques = e.ToCouches [0];
starttx = touches.clientx;
startTy = touches.clienty;
istouchMove = false;
}, false);
element.addeventListener ('touchmove', função (e) {
istouchmove = true;
E.PreventDefault ();
}, false);
Element.addeventListener ('Toukend', função (e) {
if (! Istouchmove) {
retornar;
}
var touches = e.ChangedTouches [0],
endtx = touches.clientx,
endty = touches.clienty,
DOURSX = STARTTX - ENDTX
a distância = startty - endty,
isSwipe = false;
if (Math.abs (dourningx)> = math.abs (a distância)) {
if (distancex> 20) {
console.log ('Evento de esquerda do deslizamento de fogo');
isSwipe = true;
}
else if (dourningx <-20) {
console.log ('Evento à direita do deslizamento de fogo');
isSwipe = true;
}
}
outro{
if (a distância> 20) {
console.log ('Evento de deslizamento de fogo');
isSwipe = true;
}
caso contrário, se (a distância <-20) {
console.log ('Evento de deslizamento de incêndio');
isSwipe = true;
}
}
if (isSwipe) {
console.log ('Evento de furto de fogo');
}
}, false);
Todos os eventos simulados acima são encapsulados em monoevent. O endereço completo do código: https://github.com/chenmnkken/monoevent, amigos que precisam, por favor, dê uma olhada ~
PS: Aqui eu recomendo uma ferramenta de consulta 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