HTML5-Touch-Ereignisse

Dieser Artikel stellt hauptsächlich den tatsächlichen Kampf und die Analyse von Berührungsereignissen in HTML5 vor. Freunde in Not können sich darauf beziehen.

Viele neue Ereignisse wurden zu HTML5 hinzugefügt, aber da ihre Kompatibilitätsprobleme nicht ideal sind und ihre praktischen Anwendungen nicht sehr praktisch sind, werden sie hier grundsätzlich weggelassen. Wir teilen nur Ereignisse, die weitgehend mit guten kompatibel sind Wir werden sie in Zukunft verfolgen und nach und nach die Kompatibilität verbessern. Die Ihnen heute vorgestellten Ereignisse sind hauptsächlich Touch-Ereignisse: touchstart, touchmove und touchend.

Die ersten 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. Spezifische Anweisungen unten:

　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 beendet. 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()“ zum Abbrechen der mit dem Ereignis verknüpften Standardaktion verwendet werden kann), 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. Berührungsereignisse enthalten zusätzlich zu den allgemeinen DOM-Attributen auch die folgenden drei Attribute 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 angibt, was sich seit der letzten Berührung geändert hat.

　Jedes Touch-Objekt enthält die folgenden Eigenschaften.

　clientX: Die x-Koordinate des Berührungsziels im Ansichtsfenster.
　clientY: Die y-Koordinate des Berührungsziels im Ansichtsfenster.
　Bezeichner: Die eindeutige ID, die die Berührung identifiziert.
　pageX: Die x-Koordinate des Berührungsziels auf der Seite.
　pageY: 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 markante DOM-Knotenziel.

So gesehen sind die oben genannten Attribute tatsächlich sehr kompliziert. Jedes Attribut wird so detailliert beschrieben. Nur anhand einiger Beispiele aus der Praxis 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

<p id="inp"></p>

Das obige kleine Beispiel. Wenn das Touchstart-Ereignis ausgelöst wird, wird die Touch-Position auf das p-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 p-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 eines Elements auf dem Bildschirm treten diese Ereignisse (einschließlich Mausereignisse) in der folgenden Reihenfolge auf:

(1)Touchstart
(2)Mouseover
(3)Mausbewegung(einmal)
(4)Mousedown
(5)Mouseup
(6)Klick
(7 )touchend

Nachdem wir so viel vorgestellt haben, wie ist die Kompatibilität dieser Touch-Ereignisse (Touchstart, Touchmove und Touchend): 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.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website

Das obige ist der detaillierte Inhalt vonHTML5-Touch-Ereignisse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!