So verwenden Sie Zeigerereignisse in JavaScript

Die zentralen Thesen

• Webanwendungen sollten eine Reihe von Eingabegeräten unterstützen, nicht nur eine Maus, um ein breiteres Publikum anzusprechen.
• Zeigerereignisse in JavaScript verarbeiten sowohl Maus- als auch Berührungsereignisse, sodass sie nicht separat implementiert werden müssen.
• Zeigerereignisse haben ähnliche Namen und Funktionen wie Mausereignisse, wodurch es einfach ist, vorhandenen Code zu aktualisieren, um Touch- und Stifteingaben zu unterstützen.

Viele Webanwendungen gehen davon aus, dass das Zeigegerät eines Benutzers eine Maus ist, und verwenden daher Mausereignisse, um Interaktionen abzuwickeln. Mit der Verbreitung von Touchscreen-Geräten benötigen Benutzer jedoch keine Maus mehr, um mit Websites zu interagieren. Es ist wichtig, eine Reihe von Eingabegeräten zu unterstützen, um ein möglichst breites Publikum anzusprechen.

JavaScript verfügt über einen neueren Standard namens Zeigerereignisse. Es verarbeitet sowohl Maus- als auch Berührungsereignisse, sodass Sie sich nicht um die separate Implementierung dieser Ereignisse kümmern müssen.

Was sind Zeigerereignisse?

Zeigerereignisse sind ein Webstandard, der eine einheitliche Art der Handhabung verschiedener Eingabemethoden in einem Webbrowser definiert, einschließlich Maus, Berührung und Stift. Diese Ereignisse bieten eine konsistente und plattformunabhängige Möglichkeit zur Interaktion mit Webinhalten auf verschiedenen Geräten.

Kurz gesagt: Zeigerereignisse helfen Ihnen bei der Bewältigung dieser Gruppe von Benutzerinteraktionen, unabhängig von der Quelle.

Arten von Zeigerereignissen

Zeigerereignisse werden ähnlich benannt wie die Mausereignisse, mit denen Sie vielleicht bereits vertraut sind. Für jeden MouseEvent In JavaScript gibt es eine entsprechende Zeigerereignis. Das bedeutet, dass Sie zu Ihrem alten Code zurückkehren und „Maus“ durch „Zeiger“ ersetzen können, um Berührungs- und Stifteingaben zu unterstützen.

Die folgende Tabelle zeigt die verschiedenen Zeigerereignisse im Vergleich zu Mausereignissen:

Sie können sehen, dass es drei zusätzliche Zeigerereignisse ohne entsprechende Mausereignisse gibt. Über diese Ereignisse erfahren Sie später mehr.

Verwenden von Zeigerereignissen in JavaScript

Sie können Zeigerereignisse genauso verwenden wie Mausereignisse. Wie die meisten Ereignisbehandlungen folgt der Prozess normalerweise diesem Muster:

1. Verwenden Sie einen DOM-Selektor um ein Element abzurufen.
2. Verwendung der addEventListener Geben Sie in der Methode das gewünschte Ereignis und eine Rückruffunktion an.
3. Verwenden Sie Eigenschaften und Methoden des Callback-Arguments, an Ereignis Objekt.

Hier ist ein Beispiel für die Verwendung des pointermove-Ereignisses:

// Get the target element
const target = document.getElementById('target');
// Add an event listener to your target element
target.addEventListener('pointermove', handlePointerMove);
// Function to handle pointer move event
functionhandlePointerMove(ev) {
// Handle the event however you want to
 target.textContent = `Moved at x: ${ev.clientX}, y: ${ev.clientY}`;
}

Dieser Codeblock definiert ein Zielelement und eine JavaScript-Funktion um damit umzugehen Zeigerbewegung Ereignis dann verwendet es a JavaScript-Ereignis-Listener um das Zeigerereignis und die Funktion an das Zielelement anzuhängen.

Mit diesem Code zeigt ein Element mit einer „Ziel“-ID die Zeigerkoordinaten an, wenn Sie Ihren Cursor, Finger oder Stift darüber bewegen:

Sie können die anderen Zeigerereignisse auf die gleiche Weise verwenden.

Das pointercancel-Ereignis

Das pointercancel-Ereignis wird ausgelöst, wenn ein anderes Zeigerereignis unterbrochen wird, bevor es seinen Vorgang wie ursprünglich beabsichtigt abschließt. Normalerweise bricht der Browser jedes Zeigerereignis ab, das möglicherweise zuvor aktiv war. Es gibt viele Gründe, warum a Zeigerabbrechen Ereignis könnte zum Beispiel Folgendes auslösen:

• Wenn ein Benutzer einen Anruf oder eine andere Unterbrechungsbenachrichtigung erhält, während er ein Element über den Bildschirm zieht.
• Wenn sich die Geräteausrichtung ändert.
• Wenn das Browserfenster den Fokus verliert.
• Wenn der Benutzer zu einer anderen Registerkarte oder Anwendung wechselt.

Mit dem Zeigerabbrechen Eventuell können Sie mit diesen Situationen umgehen, wie Sie möchten. Hier ist ein Beispiel:

const target = document.getElementById('target');
target.addEventListener('pointercancel', (event) => {
// Handle the situation where the pointer cancels. For example, you
// can release the pointer capture
 target.releasePointerCapture(event.pointerId);
});

Zeigererfassung

Die Zeigererfassung ist eine Funktion, die eine bestimmte Funktion ermöglicht HTML-Element Alle Zeigerereignisse für einen bestimmten Zeiger erfassen und darauf reagieren, auch wenn diese Ereignisse außerhalb der Elementgrenze auftreten.

Sie können eine Zeigererfassung für ein Element mit festlegen setpointercapture() Methode und geben Sie eine Zeigererfassung mit der frei releasepointercapture() Methode.

Der gotpointercapture Und LostPointerCapture Zeigerereignisse sind nützlich für die Zeigererfassung.

Das gotpointercapture-Ereignis

Der gotpointercapture Das Ereignis wird immer dann ausgelöst, wenn ein Element die Zeigererfassung erhält. Mit diesem Ereignis können Sie einen Status für Ihr HTML-Element initialisieren, um Zeigerereignisse zu verarbeiten. Beispielsweise können Sie in einer Zeichenanwendung verwenden gotpointercapture Ereignis, um die Anfangsposition des Cursors festzulegen.

Das Lostpointercapture-Ereignis

Der LostPointerCapture Das Ereignis wird ausgelöst, wenn ein Element die Zeigererfassung verliert. Sie können damit jeden Status bereinigen oder entfernen, der erstellt wurde, als das Element die Zeigererfassung erlangte. In einer Zeichenanwendung möchten Sie möglicherweise Folgendes verwenden LostPointerCapture um den Cursor auszublenden.

Eigenschaften von Zeigerereignissen

Zeigerereignisse verfügen über Eigenschaften, die Ihnen dabei helfen, Ihre Website interaktiver und reaktionsfähiger zu gestalten. Die Eigenschaften von Mausereignissen sind dieselben Eigenschaften, die Sie auch bei Zeigerereignissen finden, plus einige zusätzliche Eigenschaften. In diesem Artikel werden einige der zusätzlichen Eigenschaften erläutert.

Die pointerId-Eigenschaft

Der Zeiger-ID ist eine Zeigerereigniseigenschaft, die Ihnen hilft, jede eindeutige Zeigereingabe, z. B. Stift, Finger oder Maus, zu identifizieren. Jede Zeigereingabe erhält eine eindeutige ID (automatisch vom Browser generiert), mit der Sie sie verfolgen und Vorgänge daran ausführen können.

Eine tolle Verwendung für die Zeiger-ID Property ist eine Spieleanwendung, bei der Benutzer mehrere Finger oder Stifte gleichzeitig verwenden. Der Zeiger-ID Mit der Eigenschaft können Sie den Überblick über jede Zeigeroberfläche behalten, indem Sie jeder von ihnen eine eindeutige ID zuweisen. Die primäre ID wird dem ersten Zeigereingang zugewiesen.

Diese Eigenschaft ist besonders für Touch-Geräte nützlich. Geräte, die auf Mauszeigern basieren, können jeweils nur über eine Zeigereingabe verfügen, ohne dass ein externes Gerät daran angeschlossen ist.

Hier ist ein einfaches Beispiel, das die ID jeder Zeigereingabe in die Konsole ausgibt:

const target = document.getElementById('target');
target.addEventListener('pointerdown', (event) => {
console.log(`Pointer ID: ${event.pointerId}`);
// Handle the pointer down event for the specific pointerId
});

Die pointerType-Eigenschaft

Mithilfe der pointerType-Eigenschaft können Sie zwischen den verschiedenen Arten von Zeigereingaben unterscheiden und darauf basierende Operationen ausführen. Sie können zwischen einer Maus, einem Stift und einer Fingerberührung unterscheiden. Diese Eigenschaft kann nur eine von drei Zeichenfolgeneingaben annehmen: „Maus“, „Stift“ oder „Touch“. Hier ist ein einfaches Beispiel für die Verwendung von Zeigertyp Eigentum:

functionhandlePointerEvent(event){
// Using the pointerType property
switch (event.pointerType) {
case'mouse':
// Handle the situation where the pointing device is a mouse
console.log(`Mouse Pointer ID: ${event.pointerId}`);
break;
case'pen':
// Handle the situation where the pointing device is a stylus
console.log(`Stylus Pointer ID: ${event.pointerId}`);
break;
case'touch':
// Handle the situation where the pointing device is a finger touch
console.log(`Touch Pointer ID: ${event.pointerId}`);
break;
default:
// Handle other pointer types or cases
console.log(`pointerType ${event.pointerType} is not supported`);
break;
 }
}
// Attach pointer events to elements
element.addEventListener('pointerdown', handlePointerEvent);

Die Eigenschaften für Breite und Höhe

Diese Eigenschaften stellen die Breite und Höhe der Kontaktfläche des Zeigers in Millimetern dar. Einige Browser unterstützen sie nicht und ihr Wert ist in solchen Browsern immer 1.

Ein guter Anwendungsfall für diese Eigenschaften sind Anwendungen, die präzise Eingaben erfordern oder zwischen den Größen verschiedener Eingaben unterscheiden müssen. Beispielsweise kann in einer Zeichenanwendung eine größere Höhe und Breite bedeuten, dass der Benutzer mit einem breiteren Strich zeichnet und umgekehrt.

In den meisten Fällen werden Sie wahrscheinlich die Eigenschaften „Breite“ und „Höhe“ für Berührungsereignisse verwenden.

Verwenden Sie Zeigerereignisse für mehr Inklusivität

Mit Zeigerereignissen können Sie ohne großen Aufwand auf eine Vielzahl von Geräten und Eingabetypen eingehen. Sie sollten sie immer in Ihren Anwendungen verwenden, um modernen Standards zu entsprechen und zum Aufbau eines besseren Webs beizutragen.