Kommentar: Die meisten Interaktionen auf Mobiltelefonen werden durch Berührung erreicht. Für Touchscreen -interaktive Websites sind Berührungsereignisse sehr wichtig. Hier führen wir mehrere Touch -Events ein, die beliebter sind. Sie können diese Veranstaltung in den meisten modernen Browsern testen. Interessierte Freunde können davon lernen.
VorwortWas ist der Unterschied zwischen einer Touchscreen -Website und einer herkömmlichen PC -Website? Die Änderungen der Interaktionsmethoden sind die ersten, die betroffen sind. Zum Beispiel ist das Click -Ereignis, das wir häufig verwenden, unter Touchscreen -Geräten so machtlos.
Die meisten Interaktionen auf dem Mobiltelefon werden durch Touch erreicht, daher sind Touch -Events für interaktive Websites mit Touchscreens sehr wichtig.
Apple hat die Touch -Event -API in iOS 2.0 eingeführt, und Android holt diesen Tatsachenstandard ein, um die Lücke einzugrenzen. Vor kurzem arbeitet eine W3C -Arbeitsgruppe zusammen, um diese Touch -Event -Norm zu formulieren.
Spezifikation
Hier führen wir mehrere Touch -Events ein, die beliebter sind. Sie können dieses Ereignis in den meisten modernen Browsern testen (muss ein Touchscreen -Gerät sein):
TouchStart: Ausgelöst, wenn die Berührung beginnt
TouchMove: Ausgelöst, wenn der Finger auf dem Bildschirm gleitet
Touchend: Ausgelöst, wenn die Berührung endet
Jedes Touch-Ereignis enthält drei Touch-Listen. Jede Liste enthält eine entsprechende Reihe von Berührungspunkten (zur Implementierung von Multi-Touch):
Berührungen: Eine Liste aller Finger, die sich derzeit auf dem Bildschirm befinden.
TargetTouches: Liste der Finger im aktuellen DOM -Element.
Änderungspunkte: Liste der Finger mit dem aktuellen Ereignis.
Jeder Berührungspunkt enthält die folgenden Berührungsinformationen (häufig verwendet):
Kennung: Ein Wert, der den aktuellen Finger in der Touch -Sitzung eindeutig identifiziert. Im Allgemeinen startet die Flussnummer ab 0 (Android4.1, UC)
Ziel: DOM -Element ist das Ziel, das durch die Aktion abzielt.
pagex/pagex/clientx/clienty/screcialx/sercery: Ein Wert, bei dem die Aktion auf dem Bildschirm erfolgt (Seite enthält die Scroll -Distanz, der Client enthält nicht die Bildlaufdistanz, Bildschirm basiert auf dem Bildschirm).
radiusx/radiusy/rotationangle: zeichnen Sie eine Ellipse ungefähr der Form eines Fingers, zwei Radien- und Drehwinkels der Ellipse. Der vorläufige Testbrowser unterstützt ihn nicht, aber zum Glück werden die Funktionen nicht häufig verwendet, sodass jeder zum Feedback willkommen ist.
Mit diesen Informationen können wir Benutzern unterschiedliche Feedbacks basierend auf diesen Ereignisinformationen geben.
Im Folgenden werde ich Ihnen eine kleine Demo, ein Einzelfinger mit Touchmove zeigen:
/*Mit einem einzelnen Finger ziehen*//
var obj = document.getElementById ('id');
obj.addeventListener ('TouchMove', Funktion (Ereignis) {
// Wenn sich nur einen Finger in der Position dieses Elements befindet
if (event.targettouches.length == 1) {
Ereignis.PreventDefault (); // Blockieren Sie das Browser -Standard -Ereignis, wichtig
var touch = event.targettouches [0];
// Setzen Sie das Element, wo Ihr Finger ist
Obj.Style.Left = Touch.Pagex-50 + 'PX';
obj.style.top = touch.pagey-50 + 'px';
}
}, FALSCH);
Tipps zu den vier Pseudoklassen eines Tags in Touchscreen-Geräten:
Wir alle wissen, dass die vier Pseudoklassen des A-Tag-Links, besucht, aktiv und HOVER für Klickereignisse konzipiert sind. Versuchen Sie daher, sie nicht in Touchscreen-Websites zu verwenden. Die meisten Tests sind ebenfalls nicht verfügbar. Aber hier ist ein kleiner Trick über Schwebe. Wenn Sie auf eine Schaltfläche klicken, bleibt die Schaltfläche im Schwebstatus. Zu diesem Zeitpunkt funktioniert das CSS, das Sie basierend auf dieser Pseudo-Klasse festgelegt haben, auch, bis Sie mit dem Finger auf eine andere Schaltfläche klicken. Der Schwebstatus wird auf eine andere Schaltfläche übertragen. Mit diesem können wir einige kleine Auswirkungen haben. Dieser Trick ist in den meisten Browsern noch erhältlich.
Ideale sind voll, die Realität ist dünn!
Obwohl W3C für Multi-Touch bereit ist, unterstützen nur wenige Browser Multi-Touch-Funktionen, insbesondere Browser auf Android-Plattformen, wodurch die oben eingeführte Fingerliste leer wird. Das Erfassen von zwei Touch -Punkten führt direkt zu einem Berührungsversagen! Glücklicherweise kann der Safari -Browser, der mit iOS -Geräten geliefert wird, diese Funktion unterstützen, was uns voller Hoffnung für die Zukunft macht. Immerhin wurden wir zu lange durch den Einzelpunktbetrieb der Maus eingesperrt. Wie aufregend ist es, eine Website mehr zu verwenden!