Einführung in Touch-Ereignisse beim Erstellen von Touchscreen-Websites mit html5_html5-Tutorial-Kenntnissen

Vorwort
Was ist der Unterschied zwischen einer Touchscreen-Website und einer herkömmlichen PC-Website? Änderungen in den Interaktionsmethoden tragen die Hauptlast. Beispielsweise ist unser häufig verwendetes Klickereignis auf Touchscreen-Geräten so machtlos.
Die meisten Interaktionen auf Mobiltelefonen werden durch Berührung erreicht, daher sind Berührungsereignisse für interaktive Websites mit Touchscreen sehr wichtig.
Apple hat die Touch-Event-API in iOS 2.0 eingeführt, und Android holt diesen De-facto-Standard auf und verringert die Lücke. Kürzlich arbeitet eine W3C-Arbeitsgruppe zusammen, um diese Touch-Event-Spezifikation zu entwickeln.

Spezifikation
Hier stellen wir einige beliebte Touch-Ereignisse vor. Sie können dieses Ereignis in den meisten modernen Browsern testen (muss ein Touchscreen-Gerät sein):
Touchstart: Wird ausgelöst, wenn Die Berührung beginnt
touchmove: Wird ausgelöst, wenn der Finger über den Bildschirm gleitet
touchend: Wird ausgelöst, wenn die Berührung endet
Und jedes Berührungsereignis enthält drei Berührungspunkte. Jede Liste enthält eine entsprechende Reihe von Berührungspunkten (früher). Multi-Touch implementieren):
Berührungen: Eine Liste aller Finger, die sich derzeit auf dem Bildschirm befinden.
targetTouches: Eine Liste der Finger, die sich auf dem aktuellen DOM-Element befinden.
changedTouches: Eine Liste der am aktuellen Ereignis beteiligten Finger.
Jeder Berührungspunkt enthält die folgenden Berührungsinformationen (häufig verwendet):
Bezeichner: ein numerischer Wert, der den aktuellen Finger in der Berührungssitzung eindeutig identifiziert. Im Allgemeinen eine Seriennummer beginnend bei 0 (android4.1, uc)
target: DOM-Element, das das Ziel der Aktion ist.
pageX/pageX/clientX/clientY/screenX/screenY: ein Wert, die Position auf dem Bildschirm, an der die Aktion stattfindet (Seite beinhaltet die Scrolldistanz, Client beinhaltet nicht die Scrolldistanz und Bildschirm basiert auf dem Bildschirm) .
radiusX/radiusY/rotationAngle: Zeichnen Sie eine Ellipse, die ungefähr der Form eines Fingers entspricht, mit den beiden Radien bzw. Drehwinkeln der Ellipse. Der vorläufige Testbrowser unterstützt die Funktion nicht. Feedback ist willkommen.
Mit diesen Informationen können wir Benutzern basierend auf diesen Veranstaltungsinformationen unterschiedliche Rückmeldungen geben.

Nachfolgend zeige ich Ihnen eine kleine Demo zum Ziehen mit einem Finger mit Touchmove :

Kopieren Sie den Code

Der Code lautet wie folgt:

/*Mit einem Finger ziehen*/
var obj = document.getElementById('id'); obj .addEventListener('touchmove', function(event) {
// Wenn sich nur ein Finger an der Position dieses Elements befindet
if (event.targetTouches.length == 1) {
　 event. präventDefault() ;// Browser-Standardereignisse verhindern, wichtig
var touch = event.targetTouches[0]// Platzieren Sie das Element dort, wo sich Ihr Finger befindet
obj.style.left = touch.pageX- 50 'px';
obj.style.top = touch.pageY-50 'px';
}, false;



Über ein Tag Vier Tipps für Pseudoklassen in Touchscreen-Geräten

:
Wir alle wissen, dass die vier Pseudoklassen „a tag“, „link“, „visited“, „active“ und „hover“ speziell für Klickereignisse entwickelt wurden. Versuchen Sie es also um sie auf Touchscreen-Websites zu verwenden. Verwenden Sie sie nicht. Nach dem Testen sind die meisten davon nicht verfügbar. Aber hier ist ein kleiner Trick zum Schweben. Nachdem Sie auf eine Schaltfläche geklickt haben, bleibt die Schaltfläche immer im Schwebezustand. Zu diesem Zeitpunkt funktioniert das CSS, das Sie basierend auf dieser Pseudoklasse festgelegt haben, auch, bis Sie mit dem Finger auf eine andere klicken . Mit einer Schaltfläche wird der Schwebezustand auf eine andere Schaltfläche übertragen. Damit können wir einige kleine Effekte erzielen. Dieser Trick funktioniert immer noch in den meisten Browsern.
Ideale sind voll, die Realität ist dürftig
!
Obwohl w3c für Multi-Touch bereit ist, unterstützen leider nur wenige Browser Multi-Touch-Funktionen, insbesondere Browser auf der Android-Plattform, wodurch die oben eingeführte Fingerliste zu leerem Gerede wird. Das Erfassen von zwei Berührungspunkten führt direkt zu einem Berührungsfehler! Glücklicherweise kann der mit iOS-Geräten gelieferte Safari-Browser diese Funktion unterstützen, was uns für die Zukunft voller Hoffnung stimmt. Schließlich waren wir schon zu lange von der Ein-Klick-Bedienung mit der Maus gefangen. Wie aufregend ist es, eine Website mit mehreren Fingern zu bedienen!