PointerEvent.pointerType — Eigenschaft · JavaScript-Referenz

Signatur

PointerEvent.pointerType

Beschreibung

Die Eigenschaft pointerType des PointerEvent-Interfaces zeigt an, mit welchem Eingabegerät ein Pointer-Ereignis wie pointerdown, pointermove oder pointerup ausgelöst wurde. Die Spezifikation legt die Werte "mouse", "pen" und "touch" fest. Kann der Browser den Gerätetyp nicht bestimmen, ist der Wert eine leere Zeichenkette "". Browser dürfen außerdem eigene, herstellerspezifische Werte liefern.

So kann eine einzige Ereignisbehandlung Maus, Stift und Touch abdecken und trotzdem je nach Gerät anders reagieren. Typische Beispiele: größere Trefferflächen bei Fingereingabe, Druckstärke (pressure) nur beim Stift auswerten oder Hover-Effekte nur bei der Maus anzeigen.

Der Wert gilt immer für das einzelne Ereignis und nicht für das ganze Gerät. Auf Hybridgeräten (Laptop mit Touchscreen, Tablet mit Stift) kann pointerType deshalb von Ereignis zu Ereignis wechseln. Wenn du nur einmal beim Seitenstart den Eingabetyp festlegen willst, sind Media Queries wie (pointer: coarse) meist die bessere Wahl.

Rückgabewert

Typ

string

Beschreibung

"mouse", "pen", "touch", eine leere Zeichenkette "", wenn der Typ unbekannt ist, oder ein herstellerspezifischer Wert.

Beispiele

Gerätetyp beim Antippen oder Klicken protokollieren

const button = document.querySelector('#aktion');

const onPointerDown = (event) => {
  console.log(`Eingabe per: ${event.pointerType || 'unbekannt'}`);
};

button.addEventListener('pointerdown', onPointerDown);

// Später wieder entfernen
// button.removeEventListener('pointerdown', onPointerDown);

Eingabe per: mouse // bzw. "touch" oder "pen"

Zeichenfläche: Strichstärke je nach Gerät

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
let zeichnet = false;

const strichbreite = (e) => {
  switch (e.pointerType) {
    case 'pen':   return 1 + e.pressure * 8; // Druckstärke nutzen
    case 'touch': return 6;                  // Finger = breiter
    default:      return 2;                  // Maus o. Ä.
  }
};

canvas.addEventListener('pointerdown', (e) => {
  zeichnet = true;
  canvas.setPointerCapture(e.pointerId);
  ctx.beginPath();
  ctx.moveTo(e.offsetX, e.offsetY);
});

canvas.addEventListener('pointermove', (e) => {
  if (!zeichnet) return;
  ctx.lineWidth = strichbreite(e);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
});

canvas.addEventListener('pointerup', () => { zeichnet = false; });

Hover-Vorschau nur bei Maus über die on-Property

const karte = document.querySelector('.produkt-karte');

karte.onpointerenter = (e) => {
  if (e.pointerType === 'mouse') {
    karte.classList.add('vorschau');
  }
};

karte.onpointerleave = () => {
  karte.classList.remove('vorschau');
};

// Wichtig · Fallstricke

Leere Zeichenkette: Ist der Gerätetyp nicht bestimmbar, liefert die Eigenschaft "". Plane deshalb immer einen default-Zweig ein.
Hybridgeräte: Der Wert kann sich zwischen einzelnen Ereignissen ändern. Speichere ihn nicht einmalig als festen „Gerätetyp“ der Sitzung.
Nur bei PointerEvent: Bei klassischen MouseEvents (z. B. mousedown) gibt es die Eigenschaft nicht, sie ist dort undefined. Seit Chrome 92 und Firefox sind click, contextmenu und auxclick jedoch PointerEvents. Beim Auslösen per Tastatur kann pointerType dort "" sein.
Touch-Gesten: Bei touch scrollt oder zoomt der Browser standardmäßig und sendet dann pointercancel. Für eigene Gesten setze per CSS touch-action: none.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt (Safari ab 13). Der alte IE10 lieferte Zahlenkonstanten statt Zeichenketten.

Siehe auch

NavigateEvent.navigationType PointerEvent.pointerId PointerEvent.pressure PointerEvent.tiltY PointerEvent.azimuthAngle