Signatur
Beschreibung
PointerEvent.height liefert die Höhe der Kontaktgeometrie, mit der ein Zeiger die Oberfläche berührt, in CSS-Pixeln. Zusammen mit PointerEvent.width beschreibt der Wert ein Rechteck um den Punkt clientX/clientY. Er ist bei Touch-Eingaben besonders nützlich, weil ein Finger keinen einzelnen Punkt trifft, sondern eine Fläche.
Typische Einsatzfälle sind Zeichen- und Mal-Anwendungen (Pinselgröße anhand der Fingerfläche), Handballenerkennung (palm rejection: sehr große Kontaktflächen werden verworfen) sowie Trefferprüfung für kleine Bedienelemente, bei der die Kontaktfläche statt eines einzelnen Punkts ausgewertet wird.
Kann die Hardware die Kontaktgeometrie nicht ermitteln, etwa bei Maus oder vielen Stiften, liefert der Browser laut Spezifikation den Standardwert 1. Den Zeigertyp prüft man über pointerType. So verhindert man, dass dieser Standardwert als echte Messung gewertet wird.
Rückgabewert
double). Hat das Gerät keine Kontaktgeometrie, ist der Wert 1.Beispiele
Kontaktfläche beim Berühren ausgeben
const pad = document.querySelector('#pad');
pad.addEventListener('pointerdown', (event) => {
console.log(`${event.pointerType}: ${event.width.toFixed(1)} × ${event.height.toFixed(1)} px`);
});Pinselgröße aus der Fingerfläche ableiten
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.style.touchAction = 'none'; // Scrollen/Zoomen beim Zeichnen verhindern
canvas.addEventListener('pointermove', (event) => {
if (event.buttons === 0) return;
const rect = canvas.getBoundingClientRect();
// Bei Maus/Stift ohne Geometrie ist height 1 -> Druck als Ersatz nutzen
const size = event.pointerType === 'touch'
? Math.max(event.width, event.height) / 2
: 2 + event.pressure * 8;
ctx.beginPath();
ctx.arc(event.clientX - rect.left, event.clientY - rect.top, size, 0, Math.PI * 2);
ctx.fill();
});Handballen-Erkennung (Palm Rejection)
const MAX_FINGER_SIZE = 40; // CSS-Pixel, Schwellwert empirisch wählen
const onDown = (event) => {
if (event.pointerType === 'touch' && event.height > MAX_FINGER_SIZE) {
console.log('Kontakt ignoriert – vermutlich Handballen');
return;
}
console.log('Gültiger Kontakt bei', event.clientX, event.clientY);
};
document.addEventListener('pointerdown', onDown);
// Später wieder entfernen:
// document.removeEventListener('pointerdown', onDown);Kontaktrechteck berechnen
const getContactRect = ({ clientX, clientY, width, height }) => ({
left: clientX - width / 2,
top: clientY - height / 2,
right: clientX + width / 2,
bottom: clientY + height / 2,
});
document.addEventListener('pointerdown', (event) => {
console.log(getContactRect(event));
});// Wichtig · Fallstricke
- Standardwert 1: Maus, viele Stifte und Touchscreens ohne Flächenmessung melden
1. Den Wert immer zusammen mitpointerTypeauswerten. - Nur lesbar: Eine Zuweisung hat keine Wirkung. Für synthetische Ereignisse setzt man
heightim Konstruktor:new PointerEvent('pointerdown', { width: 20, height: 30 }). - Geräteabhängig: Genauigkeit und Wertebereich hängen stark von Hardware und Betriebssystem ab. Manche Geräte melden feste oder gerundete Werte. Schwellwerte sollte man daher auf echten Geräten prüfen.
- CSS-Pixel: Der Wert berücksichtigt Zoom und
devicePixelRatio. Für physische Pixel mitwindow.devicePixelRatiomultiplizieren. - Kompatibilität: Unterstützt von Chrome, Edge, Firefox und Safari (ab 13). Das ältere
Touch.radiusYist eine Alternative für die Touch Events API.