pointer-events & touch-action

Zuletzt aktualisiert am 15. Februar 2026

Mit pointer-events steuerst du, ob ein Element auf Mausklicks und Touch-Ereignisse reagiert. Mit touch-action legst du fest, welche Touch-Gesten der Browser verarbeitet. Beide Properties sind essentiell für interaktive Overlays, dekorative Elemente und optimierte mobile Nutzererlebnisse.

Grundlagen

pointer-events: none macht ein Element unsichtbar für alle Maus- und Touch-Interaktionen. Klicks gehen direkt durch das Element hindurch zu dem, was darunter liegt. Das ist perfekt für dekorative Overlays, Wasserzeichen oder Loader-Animationen, die den Inhalt nicht blockieren sollen.

touch-action gibt dir Kontrolle über Touch-Gesten auf mobilen Geräten. Du kannst Zoom, Pan und andere native Browser-Gesten deaktivieren oder einschränken. Das ist wichtig für Custom-Drag-Interfaces, Spiele oder komplexe Web-Apps, die eigene Touch-Logik brauchen.

Wichtig: pointer-events: none entfernt das Element nicht aus dem Accessibility-Tree. Screenreader finden es weiterhin, Keyboard-Navigation funktioniert normal. Das ist kein Ersatz für das disabled-Attribut.

Syntax & Werte

pointer-events

touch-action

Beispiele

Klick durch Overlay

Ein dekoratives Overlay, das visuell über dem Inhalt liegt, aber Klicks durchlässt. Buttons und Links darunter bleiben voll funktional.

.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none; /* Klicks gehen durch */
  background: linear-gradient(
    135deg,
    rgba(26, 86, 219, 0.1),
    rgba(124, 58, 237, 0.1)
  );
}

<div class="container">
<div class="overlay"></div>
<div class="content">
  <p style="margin: 0 0 1rem 0; font-family: system-ui, sans-serif; color: #111827;">Dieser Text ist unter einem Overlay, aber der Button funktioniert:</p>
  <button onclick="alert('Klick durchgegangen!')">Klick mich</button>
</div>
</div>

Deaktivierter Button

pointer-events: none verhindert Klicks, aber kein vollständiger Ersatz für disabled. Der erste Button sieht deaktiviert aus, bleibt aber fokussierbar per Tab-Taste.

/* Sieht deaktiviert aus, ist aber per Tab erreichbar */
.btn-fake-disabled {
  pointer-events: none;
  opacity: 0.6;
}

/* Richtig deaktiviert, auch für Screenreader */
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

<div class="button-group">
<button class="btn btn-pointer-events">
  pointer-events: none (tab fokussierbar!)
</button>
<button class="btn btn-disabled" disabled>
  disabled (richtig deaktiviert)
</button>
</div>

Wasserzeichen-Overlay

Ein Wasserzeichen über Text, das Lesbarkeit nicht stört und Text-Selektion nicht blockiert.

.watermark {
  position: absolute;
  pointer-events: none; /* Text darunter bleibt selektierbar */
  user-select: none;
  color: rgba(220, 38, 38, 0.08);
  font-size: 4rem;
  transform: translate(-50%, -50%) rotate(-45deg);
}

<div class="watermark-container">
<div class="watermark">ENTWURF</div>
<div class="text-content">
  <p>Dieser Text kann normal selektiert und gelesen werden, obwohl ein Wasserzeichen darüber liegt. Das Wasserzeichen blockiert keine Interaktionen.</p>
  <p>Versuch mal, diesen Text zu markieren: funktioniert perfekt!</p>
</div>
</div>

touch-action: manipulation

Formular-Bereich, wo Double-Tap-Zoom deaktiviert ist für bessere Touch-UX. Pan und Pinch-Zoom funktionieren weiter.

/* Kein Double-Tap-Zoom auf Formularen */
.form-area {
  touch-action: manipulation;
}

/* Pan + Pinch-Zoom bleiben erlaubt,
   nur Double-Tap-Zoom wird deaktiviert */

<div class="form-area">
<div class="form-group">
  <label for="username">Benutzername</label>
  <input type="text" id="username" placeholder="Kein Double-Tap-Zoom">
</div>
<div class="form-group">
  <label for="email">E-Mail</label>
  <input type="email" id="email" placeholder="auf Mobile besser">
</div>
<button>Absenden</button>
</div>

Drag-Bereich mit touch-action: none

Ein Drag-Interface, wo alle nativen Touch-Gesten deaktiviert sind. Nur Custom-JavaScript verarbeitet Touch-Events.

.drag-area {
  touch-action: none; /* Alle Gesten deaktiviert */
  user-select: none;
}

/* JavaScript übernimmt die Touch-Events:
   pointerdown, pointermove, pointerup */

<div class="drag-area">
<div class="drag-box">
  Zieh mich!
</div>
<p class="drag-info">
  touch-action: none, Zoom & Pan deaktiviert
</p>
</div>

Barrierefreiheit

pointer-events: none entfernt ein Element nicht aus dem Accessibility-Tree. Screenreader lesen es weiterhin vor, Keyboard-Navigation funktioniert normal. Es ist kein Ersatz für semantisches HTML oder das disabled-Attribut.

Wenn du einen Button deaktivieren willst, nutze disabled, nicht pointer-events: none. Das disabled-Attribut kommuniziert den Status an Assistive Technologies und verhindert auch Keyboard-Fokus.

touch-action: none kann Pinch-Zoom deaktivieren. Das ist schlecht für Barrierefreiheit. Nutzer mit Sehbehinderung brauchen Zoom. Setze touch-action: none nur auf kleine, spezifische Drag-Bereiche, nie auf die ganze Seite.

Teste immer mit echten mobilen Geräten und Screenreadern, ob deine Interaktionen für alle zugänglich bleiben.

Häufige Fehler

• pointer-events: none als Disabled-Ersatz: Das Element bleibt fokussierbar per Tab-Taste und wird von Screenreadern erkannt. Nutze das echte disabled-Attribut.
• Keyboard-Navigation vergessen: Ein Element mit pointer-events: none kann weiterhin per Tab fokussiert werden. Setze tabindex="-1" wenn du das verhindern willst.
• touch-action: none auf der ganzen Seite: Deaktiviert Zoom für alle, was Barrierefreiheit zerstört. Nutze es nur lokal auf Drag-Bereichen.
• Nicht auf echten mobilen Geräten testen: Touch-Verhalten im Desktop-Emulator ist nicht zuverlässig. Teste auf iOS und Android.
• Erwarten, dass pointer-events die Tab-Reihenfolge ändert: Es beeinflusst nur Pointer-Events, nicht Keyboard-Navigation oder den Accessibility-Tree.

Browser-Kompatibilität

pointer-events und touch-action werden von allen modernen Browsern vollständig unterstützt.

Email-Kompatibilität

pointer-events und touch-action haben in E-Mails keine Wirkung, da E-Mail-Clients keine erweiterten Pointer-Events unterstützen.

Verwandte Eigenschaften