HTML5-Haupt-Touch-Ereignisse (Touchstart, Touchmove und Touchend)

　HTML5 Es wurden viele neue Ereignisse 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 nur Ereignisse, die weitgehend kompatibel sind Mit guten Anwendungen wird die Freigabe in Zukunft hinzugefügt, wenn sich die Kompatibilität verbessert. 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 sein eigener mobiler 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 stoppt. Bezüglich der genauen Abfahrtszeit dieser Veranstaltung gibt es im 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 bietet das Ereignis-Objekt jedes Berührungsereignisses allgemeine -Attribute in der Mauspraxis: Blasen (Typ des Blasenereignisses), abbrechbar (ob die Methode „preventDefault()“ verwendet werden soll) Standardmäßig aufheben Aktion, die dem Ereignis zugeordnet ist), clientX (gibt die horizontale Koordinate des Mauszeigers zurück, wenn das Ereignis ausgelöst wird), clientY (gibt die vertikale Koordinate des Mauszeigers zurück, wenn das Ereignis ausgelöst wird), screenX (wenn ein Ereignis ausgelöst wird). horizontale Koordinate des Mauszeigers) und screenY (gibt die vertikale Koordinate des Mauszeigers zurück, 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: Ein Array, das das Berührungsobjekt des aktuell verfolgten Berührungsvorgangs darstellt.

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.

Die Eigenschaften jedes Touch-Objekts sind wie folgt.

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.

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 auffällige DOM-Knoten-Ziel.

Wenn wir uns die oben genannten Attribute ansehen, ist es tatsächlich sehr kompliziert. Nur anhand einiger realer Beispiele 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>

Kleines Beispiel oben. 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 ist die Reihenfolge, in der diese Ereignisse (einschließlich Mausereignisse) auftreten, wie folgt:

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

Wie ist die Kompatibilität dieser Berührungsereignisse? 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.

Das obige ist der detaillierte Inhalt vonHTML5-Haupt-Touch-Ereignisse (Touchstart, Touchmove und Touchend). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!