Auf Touchscreen -Geräten müssen einige relativ einfache Gesten durch sekundäre Kapselung von Touch -Ereignissen implementiert werden.
Zepto ist eine Klassenbibliothek mit relativ hohen Nutzungsraten auf mobilen Geräten. Einige Ereignisse, die durch das Touch -Modul simuliert wurden, weisen einige Kompatibilitätsprobleme auf, wie z. B. TAP -Ereignisse mit Ereignisdurchdringungsfehler auf einigen Android -Geräten, und andere Arten von Ereignissen haben ebenfalls mehr oder weniger Kompatibilitätsprobleme.
Also habe ich diese allgemein verwendeten Gestenereignisse einfach selbst eingekapselt. Da es nicht viele reale Geräte testen kann, gibt es möglicherweise einige Kompatibilitätsprobleme. Der folgende Code wird nur in einigen häufigeren Browsern auf iOS 7 und Andorid 4 getestet.
Tippen Sie auf Ereignis
Das TAP -Ereignis entspricht dem Klickeffekt im PC -Browser. Obwohl das Click -Ereignis auf Touchscreen -Geräten noch verfügbar ist, gibt es einige Verzögerungen in Klicken auf viele Geräte. Wenn Sie schnell auf "Klicken" -Ereignisse antworten möchten, müssen Sie das Touch -Ereignis verwenden, um dies zu erreichen.
Die Codekopie lautet wie folgt:
var starttx, Starty;
Element.AdDeVentListener ('TouchStart', Funktion (e) {
var toppes = e.touches [0];
startTx = toppes.clientX;
starty = toppes.clienty;
}, FALSCH );
Element.AdDeVentListener ('Touchend', Funktion (e) {
var toppes = e.canangedtouches [0],
endtx = toppes.clientx,
endy = toppes.clienty;
// Auf einigen Geräten sind Berührereignisse sensibler, was zu einer geringen Änderung der Ereigniskoordinaten beim Drücken und Freigeben des Fingers führt.
if (math.abs (starttx - endtx) <6 && math.abs (startty - endy) <6) {
console.log ('Fire Tap Event');
}
}, FALSCH );
Doubletap -Event
Das DoubleTap -Ereignis ist ein Ereignis, das ausgelöst wird, wenn der Finger zweimal in denselben Positionsbereich und in sehr kurzer Zeit auf den Bildschirm tippt. In einigen Browsern wählt das DoubleTap -Ereignis Text aus. Wenn Sie keinen Text auswählen möchten, können Sie das CSS-Attribut der Benutzerauswahl zum Element hinzufügen.
Die Codekopie lautet wie folgt:
var istouchend = false,
lastTime = 0,,
lasttx = null,
lastty = null,
firsttouchend = true,
Body = document.body,
Dtaptimer, Starttx, Starty, StartTime;
Element.AdDeVentListener ('TouchStart', Funktion (e) {
if (dtaptimer) {
Clearimeout (dtaptimer);
dtaptimer = null;
}
var toppes = e.touches [0];
startTx = toppes.clientX;
starty = toppes.clienty;
}, FALSCH );
Element.AdDeVentListener ('Touchend', Funktion (e) {
var toppes = e.canangedtouches [0],
endtx = toppes.clientx,
endy = toppes.clienty,
jetzt = Datum.Now (),,
Dauer = jetzt - letztes Mal;
// Stellen Sie zunächst sicher, dass ein einzelnes TAP -Ereignis ausgelöst werden kann
if (math.abs (starttx - endtx) <6 && math.abs (starttx - endtx) <6) {
// Stellen Sie sicher, dass das Intervall zwischen den beiden Taps innerhalb von 500 Millisekunden liegt
if (Dauer <301) {
// Die Position dieses Tipps und die Position des letzten Tipps ermöglichen Fehler in einem bestimmten Bereich
if (lastTx! == null &&
Math.abs (lasttx - endtx) <45 &&
Math.abs (lastty - endy) <45) {
firsttouchend = true;
lastTx = lastty = null;
console.log ('Fire Double Tap Event');
}
}
anders{
lastTx = endtx;
lastty = endy;
}
}
anders{
firsttouchend = true;
lastTx = lastty = null;
}
lastTime = jetzt;
}, FALSCH );
// Der Finger tippt auf iOS safari zu schnell auf den Bildschirm.
// Es besteht eine gewisse Chance, dass die TouchStart- und Touchend -Ereignisse nicht auf das zweite Mal reagiert werden
// Gleichzeitig löst der Finger Touch den Klick nicht aus
if (~ navigator.useragent.tolowerCase (). Indexof ('iPhone OS')) {
Body.AdDeVentListener ('TouchStart', Funktion (e) {
startTime = date.now ();
}, WAHR );
Body.AdDeVentListener ('Touchend', Funktion (e) {
var nolongTap = Datum.Now () - StartTime <501;
if (FirstTouchend) {
firsttouchend = false;
if (nolongtap && e.target === Element) {
dtaptimer = setTimeout (function () {
firsttouchend = true;
lastTx = lastty = null;
console.log ('Fire Double Tap Event');
}, 400);
}
}
anders{
firsttouchend = true;
}
}, WAHR );
// Das Klickereignis wird nicht ausgelöst, wenn der Finger auf iOS mehrmals auf den Bildschirm tippt.
element.addeventListener ('klick', function (e) {
if (dtaptimer) {
Clearimeout (dtaptimer);
dtaptimer = null;
firsttouchend = true;
}
}, FALSCH );
}
LongTap -Event
Das LongTap -Ereignis ist ein Ereignis, das ausgelöst wird, wenn der Finger den Bildschirm lange Zeit hält und nicht bewegt bleibt.
Die Codekopie lautet wie folgt:
var starttx, startty, ltaptimer;
Element.AdDeVentListener ('TouchStart', Funktion (e) {
if (ltaptimer) {
Clearimeout (ltaptimer);
ltaptimer = null;
}
var toppes = e.touches [0];
startTx = toppes.clientX;
starty = toppes.clienty;
ltaptimer = setTimeout (function () {
console.log ('Fire Long Tap Event');
}, 1000);
E.PreventDefault ();
}, FALSCH );
Element.AdDeVentListener ('TouchMove', Funktion (e) {
var toppes = e.touches [0],
endtx = toppes.clientx,
endy = toppes.clienty;
if (ltaptimer && (math.abs (endtx - starttx)> 5 || math.abs (endy - startty)> 5)) {
Clearimeout (ltaptimer);
ltaptimer = null;
}
}, FALSCH );
Element.AdDeVentListener ('Touchend', Funktion (e) {
if (ltaptimer) {
Clearimeout (ltaptimer);
ltaptimer = null;
}
}, FALSCH );
Swipe -Event
Das Swipe -Ereignis ist ein Ereignis, das ausgelöst wird, wenn der Finger auf dem Bildschirm gleitet. Es ist in Swipeleft (links), Swiperight (rechts), Swipeup (Up) und Swipedown (Down) unterteilt.
Die Codekopie lautet wie folgt:
var istouchmove, starttx, startty;
Element.AdDeVentListener ('TouchStart', Funktion (e) {
var toppes = e.touches [0];
startTx = toppes.clientX;
starty = toppes.clienty;
istouchmove = false;
}, FALSCH );
Element.AdDeVentListener ('TouchMove', Funktion (e) {
istouchmove = true;
E.PreventDefault ();
}, FALSCH );
Element.AdDeVentListener ('Touchend', Funktion (e) {
if (! iStouchmove) {
zurückkehren;
}
var toppes = e.canangedtouches [0],
endtx = toppes.clientx,
endy = toppes.clienty,
Distriptex = startTX - endtx
Distanz = Starty - Endy,
isSwipe = false;
if (math.abs (distancex)> = math.abs (distance)) {
if (distancex> 20) {
console.log ('Fire Swipe Links -Ereignis');
isSwipe = true;
}
sonst if (distancex <-20) {
console.log ('Fire Swipe Right Event');
isSwipe = true;
}
}
anders{
if (distanziert> 20) {
console.log ('Feuerwisch -Ereignis');
isSwipe = true;
}
sonst if (distanzig <-20) {
console.log ('Fire Swipe Down Event');
isSwipe = true;
}
}
if (isSwipe) {
console.log ('Fire Swipe Event');
}
}, FALSCH );
Alle oben simulierten Ereignisse sind in MonoEvent eingekapselt. Die vollständige Codeadresse: https://github.com/chenmnkken/monoevent, Freunde, die es brauchen, bitte schauen Sie sich an ~ ~ ~
PS: Hier empfehle ich ein Online -Query -Tool zu JS -Ereignissen, das die häufig verwendeten Ereignisarten und Funktionsfunktionen von JS zusammenfasst:
Eine vollständige Liste von JavaScript -Ereignissen und -Funktionen:
http://tools.vevb.com/table/javascript_event