In diesem Artikel wird hauptsächlich die von HTML5 Mobile Terminal entwickelte gemeinsame Touch -Ereignisse vorgestellt. Die Ereignisobjekte von Touch -Ereignissen entsprechen im Grunde den Attributen der Mausoperation. Freunde, die es brauchen, können sich darauf beziehen.
Viele neue Ereignisse wurden zu HTML5 hinzugefügt, aber da ihre Kompatibilitätsprobleme nicht ideal sind und ihre Anwendung nicht sehr praktisch ist, werden sie hier im Grunde genommen weggelassen. Wir teilen Ereignisse nur mit guter Kompatibilität mit breiten Anwendungen. Wir werden sie nacheinander hinzufügen und teilen, wenn sich die Kompatibilitätssituation in Zukunft verbessert. Die Ereignisse, die ich Ihnen heute vorstellen werde, sind hauptsächlich Touch -Events: Touchstart, Touchmove und Touchend.
Zu Beginn sind Touch Events Touchstart, TouchMove und Touchend neu hinzugefügte Ereignisse für die iOS -Version des Safari -Browsers, um Entwicklern einige Informationen zu übermitteln. Da das iOS -Gerät weder eine Maus noch über eine Tastatur verfügt, reichen bei der Entwicklung interaktiver Webseiten für mobile Safari -Browser, Maus- und Tastaturereignisse auf dem PC nicht aus.
Als das iPhone 3GS veröffentlicht wurde, bot sein eigener mobiler Safari -Browser einige neue Veranstaltungen im Zusammenhang mit Berührungsvorgängen. Das gleiche Ereignis wurde dann vom Browser auf Android implementiert. Ein Touch -Ereignis beginnt, wenn der Benutzer seinen Finger auf den Bildschirm stellt, beim Schieben auf den Bildschirm oder beim Abziehen vom Bildschirm. Die folgenden Details werden erklärt:
TouchStart -Ereignis: Ausgelöst, wenn der Finger den Bildschirm berührt, wird er ausgelöst, auch wenn ein Finger bereits auf dem Bildschirm platziert ist.
Touchmove -Ereignis: Löst kontinuierlich, wenn der Finger auf dem Bildschirm gleitet. Während dieses Ereignisses kann das Aufrufen von PreventDefault () Ereignissen das Scrollen verhindern.
Touchend -Ereignis: Ausgelöst, wenn der Finger den Bildschirm verlässt.
Touchcancel -Ereignis: Ausgelöst, wenn das System nicht mehr den Touch verfolgt. Das Dokument gibt nicht die genaue Abfahrtszeit dieses Ereignisses an, sodass wir nur erraten können.
Alle oben genannten Ereignisse werden sprudeln und können abgesagt werden. Obwohl diese Berührungsereignisse in der DOM -Spezifikation nicht definiert sind, werden sie auf DOM -kompatible Weise implementiert. Daher bietet jedes Touch Event Event -Objekt gemeinsame Attribute in der Maus -Praxis: Blasen (die Art des Blasenereignisses), abgebrochen werden (ob die mit dem Ereignis zugeordnete Standardaktion mit der Verhinderung (PURTDEFAULT () (), clientx (zurückgibt die horizontale Koordinate des Mauszeigers aus dem Mauszeiger, wenn das Ereignis ausgelöst wird). Koordinate des Mauszeigers, wenn das Ereignis ausgelöst wird) und Screeny (gibt die vertikale Koordinate des Mauszeigers zurück, wenn das Ereignis ausgelöst wird). Neben gemeinsamen DOM -Eigenschaften enthalten Berührereignisse auch die folgenden drei Attribute für die Verfolgung von Touch.
Berührungen: Eine Reihe von Berührungsobjekten, die den aktuell verfolgten Touch -Operation darstellen.
TargetTouches: Ein Array von Touch -Objekten, die für das Ereignisziel spezifisch sind.
Changetouches: Eine Reihe von Berührungsobjekten, die das darstellen, was sich seit der letzten Berührung geändert hat.
Jedes Touch -Objekt enthält die folgenden Eigenschaften.
ClientX: Berühren Sie die X-Koordinate des Ziels im Ansichtsfenster.
Clienty: Berühren Sie die Y-Koordinate des Ziels im Ansichtsfenster.
Kennung: Die eindeutige ID, die die Berührung identifiziert.
Pagex: Berühren Sie die X -Koordinate des Ziels auf der Seite.
Pagey: Berühren Sie die Y-Koordinate des Ziels auf der Seite.
ScreenX: Berühren Sie die X-Koordinate des Ziels im Bildschirm.
Siebschild: Berühren Sie die Y-Koordinate des Ziels auf dem Bildschirm.
Ziel: Berühren Sie das Ziel des DOM -Knotens.
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.
Kleine Beispiele für JavaScript -Operationen:
JavaScript -Code -Inhalt in Zwischenablage kopieren