Signatur
Beschreibung
Die schreibgeschützte Eigenschaft offsetX gibt an, wie weit der Mauszeiger zum Zeitpunkt des Ereignisses horizontal vom linken Rand der Padding-Box des Zielknotens entfernt ist. Der Rahmen (border) wird also nicht mitgezählt: Ein Klick direkt auf den linken Rahmen ergibt einen negativen Wert.
Gebraucht wird offsetX vor allem dann, wenn es um Koordinaten innerhalb eines Elements geht, zum Beispiel zum Zeichnen auf einem <canvas>, für eigene Schieberegler und Fortschrittsbalken, Bildausschnitte oder Heatmaps. Man muss dann nicht selbst clientX minus getBoundingClientRect().left rechnen.
Wichtig: Der Bezug ist immer event.target, also das innerste Element unter dem Zeiger, und nicht event.currentTarget, an dem der Listener hängt. Liegen Kindelemente im Element, beziehen sich die Werte plötzlich auf das Kind. Außerdem berücksichtigen die Browser CSS-Transformationen, sodass das Koordinatensystem bei gedrehten oder skalierten Elementen dem lokalen, nicht transformierten Element entspricht.
Rückgabewert
event.target. Der Wert ist ein double und kann Nachkommastellen haben. Laut Spezifikation ist er negativ, wenn der Zeiger links von der Padding-Kante liegt (z. B. auf dem Rahmen). Bei synthetischen Ereignissen, die mit new MouseEvent() erzeugt und nicht ausgelöst wurden, ist er 0.Beispiele
Klickposition innerhalb eines Elements anzeigen
const box = document.querySelector('#box');
box.addEventListener('click', (event) => {
console.log(`x: ${event.offsetX}, y: ${event.offsetY}`);
});Freihand-Zeichnen auf einem Canvas
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
let drawing = false;
canvas.addEventListener('pointerdown', (e) => {
drawing = true;
ctx.beginPath();
ctx.moveTo(e.offsetX, e.offsetY);
});
canvas.addEventListener('pointermove', (e) => {
if (!drawing) return;
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
});
canvas.addEventListener('pointerup', () => { drawing = false; });Fortschrittsbalken zum Spulen im Video
const bar = document.querySelector('.progress');
const video = document.querySelector('video');
bar.addEventListener('click', (e) => {
// Anteil der Breite berechnen; clientWidth = Breite der Padding-Box
const ratio = e.offsetX / bar.clientWidth;
video.currentTime = ratio * video.duration;
console.log(`Springe zu ${(ratio * 100).toFixed(1)} %`);
});Robuste Alternative bei Kindelementen
const slider = document.querySelector('.slider');
slider.addEventListener('click', (e) => {
// offsetX bezieht sich auf e.target, das auch ein Kindelement sein kann.
// Deshalb relativ zu currentTarget selbst rechnen:
const rect = e.currentTarget.getBoundingClientRect();
const x = e.clientX - rect.left - e.currentTarget.clientLeft;
console.log('offsetX:', e.offsetX, 'berechnet:', Math.round(x));
});// Wichtig · Fallstricke
- Bezug auf
target: Hat das Element mit dem Listener Kindelemente (Icons,<span>o. Ä.), bezieht sichoffsetXauf das Kind. Abhilfe: Kindernpointer-events: nonegeben oder selbst überclientXundgetBoundingClientRect()rechnen. - Padding-Kante statt Border-Kante: Der Rahmen zählt nicht mit. Auf dem linken Rahmen ist der Wert negativ.
- Transformationen:
offsetXberücksichtigt CSS-transform. Die Werte vongetBoundingClientRect()tun das nicht in derselben Weise, deshalb können sich beide Wege bei gedrehten oder skalierten Elementen unterscheiden. - Canvas-Skalierung: Die Werte sind CSS-Pixel. Weicht die interne Auflösung des Canvas (
canvas.width) von der dargestellten Größe ab, muss man umrechnen:x * canvas.width / canvas.clientWidth. - Performance: Beim Lesen von
offsetXkann der Browser ein Layout erzwingen. Bei häufigenmousemove-Ereignissen deshalb nicht mit DOM-Schreibzugriffen abwechseln. - Kompatibilität: In allen modernen Browsern verfügbar, auch in
PointerEvent. Firefox kennt die Eigenschaft erst seit Version 39. Ältere Versionen haben ganze Zahlen statt Nachkommastellen geliefert.