Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)

Viele neue Ereignisse wurden zu HTML5 hinzugefügt, aber da ihre Kompatibilitätsprobleme nicht ideal sind und ihre praktische Anwendung nicht sehr stark ist, werden sie hier grundsätzlich weggelassen. Wir teilen in Zukunft nur Ereignisse, die weitgehend mit guten Anwendungen kompatibel sind , da sich die Kompatibilitätssituation verbessert, werden in Zukunft weitere Freigaben hinzugefügt. Die Ihnen heute vorgestellten Ereignisse sind hauptsächlich Touch-Ereignisse: Touchstart, Touchmove und Touchend.

Die anfänglichen Berührungsereignisse „touchstart“, „touchmove“ und „touchend“ sind neu hinzugefügte Ereignisse im Safari-Browser für iOS, um Entwicklern einige Informationen zu übermitteln. Da iOS-Geräte weder über eine Maus noch über eine Tastatur verfügen, reichen PC-seitige Maus- und Tastaturereignisse bei der Entwicklung interaktiver Webseiten für den mobilen Safari-Browser nicht aus.

Als das iPhone 3Gs auf den Markt kam, stellte der eigene mobile Safari-Browser einige neue Ereignisse im Zusammenhang mit Touch-Bedienungen bereit. Anschließend implementierten auch Browser auf Android das gleiche Ereignis. Berührungsereignisse (Berührung) treten auf, wenn der Benutzer seinen Finger auf den Bildschirm legt, über den Bildschirm gleitet oder sich vom Bildschirm entfernt. Die folgenden Details:

Touchstart-Ereignis: Wird ausgelöst, wenn ein Finger den Bildschirm berührt, auch wenn sich bereits ein Finger auf dem Bildschirm befindet.
Touchmove-Ereignis: Wird kontinuierlich ausgelöst, wenn der Finger über den Bildschirm gleitet. Während dieses Ereignisses kann der Aufruf des Ereignisses „preventDefault()“ das Scrollen verhindern.
Touchend-Ereignis: wird ausgelöst, wenn der Finger den Bildschirm verlässt.
Touchcancel-Ereignis: wird ausgelöst, wenn das System die Verfolgung von Berührungen stoppt. Bezüglich der genauen Abfahrtszeit dieser Veranstaltung gibt es in dem Dokument keine konkrete Erklärung, sodass wir nur Vermutungen anstellen können.

Die oben genannten Veranstaltungen werden sprudeln und können abgesagt werden. Obwohl diese Berührungsereignisse nicht in der DOM-Spezifikation definiert sind, werden sie auf DOM-kompatible Weise implementiert. Daher stellt das Ereignisobjekt jedes Berührungsereignisses allgemeine Attribute in der Mauspraxis bereit: Blasen (Typ des Blasenereignisses), abbrechbar (ob die Methode „preventDefault()“ verwendet werden kann, um die mit dem Ereignis verknüpfte Standardaktion abzubrechen), clientX (Rückgabe von „When“) wenn das Ereignis ausgelöst wird, die horizontale Koordinate des Mauszeigers), clientY (gibt die vertikale Koordinate des Mauszeigers zurück, wenn das Ereignis ausgelöst wird), screenX (wenn ein Ereignis ausgelöst wird, die horizontale Koordinate des Mauszeigers) und screenY ( wird zurückgegeben, wenn ein Ereignis ausgelöst wird) Die vertikale Koordinate des Mauszeigers, wenn ein Ereignis ausgelöst wird. Zusätzlich zu den allgemeinen DOM-Eigenschaften enthalten Berührungsereignisse auch die folgenden drei Eigenschaften zum Verfolgen von Berührungen.

Berührungen: Eine Reihe von Berührungsobjekten, die die aktuell verfolgten Berührungsvorgänge darstellen.
TargetTouches: Ein Array von Touch-Objekten, die für das Ereignisziel spezifisch sind.
ChangeTouches: Ein Array von Touch-Objekten, das anzeigt, was sich seit der letzten Berührung geändert hat.

Jedes Touch-Objekt enthält die folgenden Eigenschaften.

ClientX: Die x-Koordinate des Touch-Ziels im Ansichtsfenster.
ClientY: Die Y-Koordinate des Berührungsziels im Ansichtsfenster.
Identifikator: Die eindeutige ID, die die Berührung identifiziert.
PageX: Die x-Koordinate des Berührungsziels auf der Seite.
SeiteY: Die Y-Koordinate des Berührungsziels auf der Seite.
ScreenX: Die x-Koordinate des Berührungsziels auf dem Bildschirm.
ScreenY: Die Y-Koordinate des Berührungsziels auf dem Bildschirm.
Ziel: Das auffällige DOM-Knotenziel.

So gesehen sind die oben genannten Attribute tatsächlich sehr kompliziert. Jedes Attribut wird so detailliert beschrieben. Nur anhand einiger Beispiele aus dem wirklichen Leben können wir das Geheimnis besser verstehen. Ein kleines Beispiel ist also wie folgt.

JavaScript-Code

function load (){
 
    document.addEventListener('touchstart',touch,false);
    document.addEventListener('touchmove',touch,false);
    document.addEventListener('touchend',touch,false);
     
    function touch (event){
        var event = event || window.event;
         
        var oInp = document.getElementById("inp");
 
        switch(event.type){
            case "touchstart":
                oInp.innerHTML ="Touch started (" + event.touches[0].clientX +"," + event.touches[0].clientY +")";
                break;
            case "touchend":
                oInp.innerHTML ="<br>Touch end (" + event.changedTouches[0].clientX +"," + event.changedTouches[0].clientY +")";
                break;
            case "touchmove":
                event.preventDefault();
                oInp.innerHTML ="<br>Touch moved (" + event.touches[0].clientX +"," + event.touches[0].clientY +")";
                break;
        }
         
    }
}
window.addEventListener(&#39;load&#39;,load,false);

HTML-Code

<div id="inp"></div>

Das obige kleine Beispiel. Wenn das Touchstart-Ereignis ausgelöst wird, wird die Touch-Position auf das div-Tag aktualisiert. Wenn das Touchmove-Ereignis ausgelöst wird, ist das Standardverhalten das Scrollen (das Standardverhalten der Touch-Bewegung ist das Scrollen der Seite), und dann werden die Änderungsinformationen der Touch-Operation im div-Tag aktualisiert. Das Touchend-Ereignis gibt die endgültigen Informationen zur Touch-Bedienung aus. Beachten Sie, dass beim Auslösen des Touchend-Ereignisses keine Touch-Objekte in der Touches-Sammlung vorhanden sind, da keine aktiven Touch-Vorgänge vorhanden sind.

Diese Ereignisse werden für alle Elemente des Dokuments ausgelöst, sodass verschiedene Teile der Seite separat bearbeitet werden können. Beim Berühren von Elementen auf dem Bildschirm treten diese Ereignisse (einschließlich Mausereignisse) in der folgenden Reihenfolge auf:

(1)touchstart
(2)mouseover
(3)mousemove(once)
( 4)mousedown
(5)mouseup
(6)click
(7)touchend

Nachdem wir so viel eingeführt haben, wie ist die Kompatibilität dieser Touch-Ereignisse? Zu den Browsern ) , touchmove und touchend) gehören: Safari für iOS, WebKit für Android, Dolfin für bada, BlackBerry WebKit in OS6+, Opera Mobile 10.1+ und Phantom Browser im proprietären Betriebssystem von LG. Derzeit unterstützt nur die iOS-Version von Safari Multi-Touch. Firefox 6+ und Chrome für PC unterstützen auch Touch-Ereignisse.

Hier werden der eigentliche HTML5-Kampf und die Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend) vorgestellt. Heute stelle ich Ihnen hauptsächlich einige Touch-Ereignisse mit guter Browserkompatibilität und -unterstützung vor. Ich hoffe, dass es Ihnen eine Referenz geben kann, und ich hoffe, dass Sie die chinesische PHP-Website unterstützen.

Weitere Artikel zum tatsächlichen HTML5-Kampf und zur Analyse von Berührungsereignissen (Touchstart, Touchmove und Touchend) finden Sie auf der chinesischen PHP-Website!