Den Weg in die Zukunft weisen

Sérgio Gomes
X

Früher war es einfach, auf Dinge im Web zu verweisen. Du hattest eine Maus, du hast sie bewegt und manchmal Schaltflächen gedrückt haben und das war‘s. Alles, was kein Maus wurde als eine emuliert und die Entwickler wussten genau, worauf sie zählen sollten.

Einfach bedeutet aber nicht unbedingt, dass es gut ist. Mit der Zeit wurde es immer mehr Es ist wichtig, dass nicht alles eine Maus war oder vorgetäuscht ist: Sie hätten Druckempfindliche und neigbare Stifte sorgen für kreative Freiheit; könnten Sie Ihre Finger, Sie brauchten nur das Gerät und Ihre Hand. und warum nicht mehr als einen Finger benutzen?

Es gab Touch-Events verwendet, um uns dabei zu helfen, aber es sind ein völlig separates API, speziell für Berührungen, sodass Sie zwei separate Ereignismodelle programmieren müssen, wenn Sie die sowohl Maus als auch Touchfunktion unterstützen möchten. Chrome 55 wird mit einem neueren Standard ausgeliefert das beide Modelle vereint: Zeigerereignisse.

Ein Einzelereignismodell

Mit Zeiger-Ereignissen wird die Zeigereingabemodell für den Browser, das Touchscreen, Stifte und Mäuse zusammenbringt in einer Gruppe von Ereignissen zusammenfassen. Beispiel:

document.addEventListener('pointermove',
    ev => console.log('The pointer moved.'));
foo.addEventListener('pointerover',
    ev => console.log('The pointer is now over foo.'));

Hier ist eine Liste aller verfügbaren Ereignisse. sind Sie mit Mausereignissen vertraut:

pointerover Der Zeiger hat den Begrenzungsrahmen des Elements erreicht. Bei Geräten, die Mouseover unterstützen, geschieht dies sofort. pointerdown-Ereignis für Geräte, die dies nicht tun.
pointerenter Ähnlich wie „pointerover“, aber ohne Bubble und Ziehpunkte und Nachfolgerelemente unterschiedlich. Details zu den Spezifikationen
pointerdown Der Zeiger befindet sich nun in einem aktiven Schaltflächenstatus, entweder oder der Kontakt hergestellt wird, je nach Semantik des Eingabegerät.
pointermove Die Position des Zeigers hat sich geändert.
pointerup Der Mauszeiger befindet sich nicht mehr im Status der Schaltfläche „Aktiv“.
pointercancel Ein Fehler ist aufgetreten und es ist unwahrscheinlich, dass der Zeiger weitere Ereignisse. Das heißt, Sie sollten alle laufenden Aktionen abbrechen und in einen neutralen Eingabezustand zurück.
pointerout Der Zeiger hat den Begrenzungsrahmen des Elements oder Bildschirms verlassen. Auch nach einer pointerup, wenn das Gerät den Mauszeiger nicht unterstützt.
pointerleave Ähnlich wie „pointerout“, aber ohne Bubble und Ziehpunkte und Nachfolgerelemente unterschiedlich. Details zu den Spezifikationen
gotpointercapture Das Element hat eine Zeigeraufnahme empfangen.
lostpointercapture Zeiger, der erfasst wurde, wurde veröffentlicht.

Verschiedene Eingabetypen

Mit Pointer-Ereignissen können Sie Code eingabeunabhängig schreiben. ohne separate Event-Handler für verschiedene Eingabegeräte registrieren zu müssen. Natürlich müssen Sie die Unterschiede zwischen den Eingabetypen berücksichtigen, z. B. gilt das Konzept des Hovers. Wenn Sie die verschiedenen Eingabegerätetypen unterscheiden möchten, z. B. um separate Codes/Funktionen für verschiedene Eingaben. Sie können dies jedoch innerhalb derselben Event-Handler unter Verwendung der pointerType-Eigenschaft der PointerEvent . Wenn Sie beispielsweise eine Navigationsleiste programmieren, haben für Ihr pointermove-Ereignis die folgende Logik:

switch(ev.pointerType) {
    case 'mouse':
    // Do nothing.
    break;
    case 'touch':
    // Allow drag gesture.
    break;
    case 'pen':
    // Also allow drag gesture.
    break;
    default:
    // Getting an empty string means the browser doesn't know
    // what device type it is. Let's assume mouse and do nothing.
    break;
}

Standardaktionen

In Browsern mit Touchscreen werden bestimmte Touch-Gesten verwendet, um die Seite zu scrollen, zu zoomen oder zu aktualisieren. Im Fall von Berührungsereignissen erhalten Sie weiterhin Ereignisse, finden – zum Beispiel wird touchmove auch dann ausgelöst, wenn der Nutzer scrollt.

Wenn eine Standardaktion wie Scrollen oder Zoomen ausgelöst wird, erhalten Sie ein pointercancel-Ereignis, das darauf hinweist, dass der Browser den Zeiger bewegen. Beispiel:

document.addEventListener('pointercancel',
    ev => console.log('Go home, the browser is in charge now.'));

Integrierte Geschwindigkeit: Dieses Modell ermöglicht standardmäßig eine bessere Leistung. im Vergleich zu Touch-Ereignissen, bei denen Sie passive Ereignis-Listener um das gleiche Maß an Reaktionsfähigkeit zu erreichen.

Mit der Funktion touch-action CSS-Property. Wenn Sie die Richtlinie für ein Element auf none festlegen, werden alle Browser-definierte Aktionen, die über dieses Element gestartet wurden. Es gibt jedoch eine Reihe von weitere Werte für eine genauere Steuerung, wie z. B. pan-x, dass der Browser auf Bewegungen auf der x-Achse, aber nicht auf der y-Achse reagiert. Chrome 55 unterstützt die folgenden Werte:

auto Standard; kann der Browser jede Standardaktion ausführen.
none Der Browser darf keine Standardaktionen ausführen.
pan-x Der Browser darf nur die Standardaktion für horizontales Scrollen ausführen.
pan-y Der Browser darf nur die Standardaktion für vertikales Scrollen ausführen.
pan-left Der Browser darf nur die Standardaktion für horizontales Scrollen ausführen. und die Seite nur nach links schwenken.
pan-right Der Browser darf nur die Standardaktion für horizontales Scrollen ausführen. und die Seite nur nach rechts schwenken.
pan-up Der Browser darf nur die Standardaktion „Vertikales Scrollen“ ausführen. und die Seite nur nach oben schwenken.
pan-down Der Browser darf nur die Standardaktion „Vertikales Scrollen“ ausführen. und die Seite nur nach unten schwenken.
manipulation Der Browser darf nur Scroll- und Zoomaktionen ausführen.

Zeigeraufnahme

Ich habe eine frustrierende Stunde damit verbracht, ein defektes mouseup zu debuggen bis Sie gemerkt haben, dass dies daran liegt, dass die Nutzenden die Schaltfläche loslassen, außerhalb Ihres Klickziels liegen? Nein? Okay, dann bin es vielleicht nur ich.

Bis jetzt gab es jedoch keine wirklich gute Methode, dieses Problem anzugehen. Gern. könnten Sie den mouseup-Handler für das Dokument einrichten und um den Überblick zu behalten. Das ist nicht die sauberste Lösung, insbesondere, wenn Sie eine Webkomponente erstellen und versuchen, isoliert.

Zeigerereignisse bieten eine viel bessere Lösung: Sie können den Zeiger erfassen, damit Sie dieses pointerup-Ereignis (oder ein anderes, schwer aufrufbares Ereignis) erhalten. Freunde).

const foo = document.querySelector('#foo');
foo.addEventListener('pointerdown', ev => {
    console.log('Button down, capturing!');
    // Every pointer has an ID, which you can read from the event.
    foo.setPointerCapture(ev.pointerId);
});

foo.addEventListener('pointerup', 
    ev => console.log('Button up. Every time!'));

Unterstützte Browser

Zum Zeitpunkt der Entstehung dieses Artikels werden Zeigerereignisse in Internet Explorer 11 unterstützt, Microsoft Edge, Chrome und Opera sowie teilweise Unterstützung in Firefox. Sie können finden Sie auf caniuse.com eine aktuelle Liste.

Sie können das Polyfill mit Zeigerereignissen für die Lücken füllen. Die Browserunterstützung während der Laufzeit unkompliziert:

if (window.PointerEvent) {
    // Yay, we can use pointer events!
} else {
    // Back to mouse and touch events, I guess.
}

Zeigerereignisse eignen sich hervorragend für Progressive Enhancement: Ändern Sie Ihre Initialisierungsmethoden, um die oben beschriebene Prüfung durchzuführen. Zeigerereignis hinzufügen im if-Block und bewegen Sie Ihre Maus-/Touch-Event-Handler zum Block else

Also leg los und lass uns wissen, wie du sie findest!