Pengenalan kepada penggunaan gerak isyarat lanjutan dalam kemahiran tutorial Javascript_html5

Sokongan pengiktirafan yang baru ditambah untuk input pengguna lanjutan dalam IE10, sebagai contoh: daftar operasi klik, dan melalui ayat addEventListener, anda boleh mengetahui peranti yang diklik oleh pengguna semasa, sama ada klik jari atau klik tetikus . Atau klik dengan stylus (peranti tablet semuanya disertakan dengan stylus).

<kanvas id="MyCanvas">kanvas >
MyCanvas.addEventListener( "MSPointerDown"
, MyBack, 🎜 >salah); fungsi MyBack(e) {                                                                                                                                                                                                                                                                                                                                             🎜>>
Kod di atas boleh mengenal pasti peranti yang diklik oleh pengguna semasa dan menentukannya melalui e.pointerType dalam kaedah panggil balik. Tetikus ialah 4, stilus ialah 3, dan jari ialah 2. Bagi jenis peranti nilai 1, ia masih perlu dikaji. Perkara lain yang perlu diambil perhatian ialah jika anda ingin menambah pengiktirafan peranti input dalam JavaScript, peristiwa kaedah berdaftar juga sedikit berbeza. Acara yang ditambahkan oleh
addEventListener ialah
MSPointerDown
Dalam IE10, untuk pengecaman berbilang peranti sedemikian, klik jari diutamakan, dengan syarat fungsi klik biasa tidak terjejas. Walau bagaimanapun, IE10 bukan sahaja mengenali peranti input pengguna tetapi juga menyokong banyak gerak isyarat lanjutan Berikut ialah demonstrasi sokongan gerak isyarat lanjutan IE10

Buat Objek Gerak Isyarat

Langkah pertama dalam mengendalikan gerak isyarat dalam tapak web anda ialah membuat seketika objek gerak isyarat.

<span style="COLOR: blue">var<p> myGesture = <span style="COLOR: blue">baharu</span></p> MSGesture();</span>

Seterusnya, sediakan elemen sasaran untuk gerak isyarat. Penyemak imbas akan mencetuskan acara gerak isyarat pada elemen. Pada masa yang sama, elemen ini juga boleh menentukan ruang koordinat acara.

elm = document.getElementById(<span style="COLOR: maroon">"someElement"</span>

);

elm.addEventListener(<span style="COLOR: maroon">"MSGestureChange"<code><span style="COLOR: blue">var</span> myGesture = <span style="COLOR: blue">new</span> MSGesture();, handleGesture);

Abschließend teilen Sie dem Gestenobjekt mit, welche Zeiger bei der Gestenerkennung verarbeitet werden sollen.

elm.addEventListener(<span style="COLOR: maroon">"MSPointerDown"</span>, <span style="COLOR: blue">function</span> (evt) {

<span style="COLOR: rgb(0,100,0)">// adds the current mouse, pen, or touch contact for gesture recognition</span>

myGesture.addPointer(evt.pointerId);

});

Hinweis: Vergessen Sie nicht, dass Sie –ms-touch-action verwenden müssen, um das Element zu konfigurieren, um zu verhindern, dass es standardmäßige Touch-Aktionen ausführt (z. B. Schwenken und Zoomen) und um Zeigerereignisse für die Eingabe bereitzustellen.

Umgang mit Gestenereignissen

Sobald ein Gestenobjekt ein gültiges Ziel und mindestens einen hinzugefügten Zeiger hat, beginnt es mit dem Auslösen von Gestenereignissen. Gestenereignisse können in zwei Typen unterteilt werden: statische Gesten (z. B. Klicken oder Halten) und dynamische Gesten (z. B. Zusammenziehen, Drehen und Wischen).

Klicken

Die einfachste Gestenerkennung ist das Klicken. Wenn ein Klick erkannt wird, wird das MSGestureTap-Ereignis für das Zielelement des Gestenobjekts ausgelöst. Im Gegensatz zu Klickereignissen können Tippgesten nur ausgelöst werden, wenn der Benutzer berührt, eine Maustaste drückt oder mit einem Stift berührt, ohne sich zu bewegen. Dies ist oft nützlich, wenn Sie unterscheiden möchten, ob ein Benutzer auf ein Element klickt oder es zieht.

Lange drücken

Die lange Druckgeste bezieht sich auf einen Vorgang, bei dem der Benutzer den Bildschirm mit einem Finger berührt, ihn einen Moment lang hält und ihn anhebt, ohne sich zu bewegen. Während einer Interaktion mit langem Drücken wird das Ereignis MSGestureHold mehrmals für verschiedene Zustände der Geste ausgelöst:

Code kopieren

Der Code lautet wie folgt:

element.addEventListener("MSGestureHold", handleHold);
function handleHold(evt) {
if (evt.detail & evt.MSGESTURE_FLAG_BEGIN) {
// Beginn signalisiert den Beginn einer Geste. Dies bedeutet, dass der Benutzer lange genug an der Stelle gehalten hat, sodass die Geste zu einem vollständigen Drücken und Halten wird, wenn der Finger angehoben wird.
}
if (evt.detail & evt.MSGESTURE_FLAG_END) {
// Ende signalisiert das Ende der Geste.
}
if (evt.detail & evt.MSGESTURE_FLAG_CANCEL) {

Dynamische Gesten (Kneifen, Drehen, Wischen und Ziehen)

Dynamische Gesten (z. B. Zusammenziehen oder Drehen) werden als Übergänge gemeldet, ähnlich wie CSS-2D-Übergänge. Dynamische Gesten können drei Ereignisse auslösen:

,
(das wiederholt ausgelöst wird, während die Geste fortgesetzt wird) und . Jedes Ereignis enthält Informationen zur Skalierung (Verkleinerung), Rotation, Transformation und Geschwindigkeit.

MSGestureStartDa dynamische Gesten als Übergänge gemeldet werden, ist es einfach, Elemente wie Fotos oder Puzzles mit MSGestureChange zu manipulieren, das CSS-2D-Übergänge enthält. Sie können beispielsweise das Skalieren, Drehen und Ziehen von Elementen aktivieren über: MSGestureEnd

MSGesture

Code kopieren

Der Code lautet wie folgt : targetElement.addEventListener("MSGestureChange", ManipulierenElement);

Funktion manipulierenElement(e) {

// Kommentieren Sie den folgenden Code aus, wenn Sie die bereitgestellte integrierte Trägheit deaktivieren möchten durch dynamische Gestenerkennung

// if (e.detail == e.MSGESTURE_FLAG_INERTIA)
// return;
var m = new MSCSSMatrix(e.target.style.transform); // Holen Sie sich das Neueste CSS-Transformation für das Element
e.target.style.transform = m
.translate(e.offsetX, e.offsetY) // Verschieben Sie den Transformationsursprung unter die Mitte der Geste
.rotate(e . rotation * 180 / Math.PI) // Rotation anwenden
.scale(e.scale) // Scale anwenden
.translate(e.translationX, e.translationY) // Übersetzung anwenden
.translate ( -e.offsetX, -e.offsetY); // Den Transformationsursprung nach hinten verschieben
}



Dynamische Gesten wie Skalierung und Drehung können Mausoperationen unterstützen erfolgt durch Drehen. Dies wird durch die Verwendung der STRG- bzw. UMSCHALT-Modifikatortaste bei gleichzeitiger Verwendung des Mausrads erreicht.