JavaScript MouseEvent offsetX Property

What You’ll Learn

MouseEvent.offsetX is a read-only number: how far the pointer is from the left padding edge of the element that received the event. Learn when to use it instead of clientX / pageX, how it pairs with offsetY, and five try-it labs.

Introduction

Drawing on a canvas, marking a spot inside a photo, or measuring a click inside a card all need “where inside this element?” That is offsetX (horizontal) and offsetY (vertical)—coordinates relative to the target’s padding box, not the window or the whole page.

box.addEventListener("click", (event) => {
  console.log(event.offsetX); // pixels from the target's left padding edge
});

Understanding the Property

MDN: offsetX provides the offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node.

• Instance — read event.offsetX in a handler.
• Number — CSS pixels; a floating-point double.
• Target-relative — measured from event.target’s padding edge.
• Read-only — set via constructor options on synthetic events only.

📝 Syntax

const x = mouseEvent.offsetX;

Value

A double floating-point value in pixels (MDN). Early versions of the specification defined this as an integer; modern browsers report a floating-point number.

⚖️ offsetX vs Other X Coordinates

Pair offsetX with offsetY for a full point inside the target. Prefer offsetX over non-standard layerX when you need element-local coordinates.

Examples Gallery

Examples follow MDN MouseEvent.offsetX. Click inside boxes and compare local vs viewport coordinates in the try-it labs.

const box = document.querySelector("#box");
const log = document.querySelector("#log");

box.addEventListener("click", (e) => {
  log.textContent = `offsetX: ${e.offsetX}, offsetY: ${e.offsetY}`;
});

offsetX: 24, offsetY: 18

box.addEventListener("click", (e) => {
  console.log({
    offsetX: e.offsetX, // relative to the box
    clientX: e.clientX, // relative to the viewport
    pageX: e.pageX      // relative to the document
  });
});

{
  offsetX: 40,
  clientX: 280,
  pageX: 280
}

const event = new MouseEvent("click", {
  offsetX: 40,
  offsetY: 20,
  bubbles: true
});

console.log(event.offsetX); // 40
console.log(event.offsetY); // 20

40
20

track.addEventListener("click", (e) => {
  const width = track.clientWidth || 1;
  const percent = Math.min(100, Math.max(0, (e.offsetX / width) * 100));
  console.log(`Clicked at ${percent.toFixed(1)}%`);
});

Clicked at 52.3%

const area = document.querySelector("#area");
const dot = document.querySelector("#dot");

area.addEventListener("click", (e) => {
  // area { position: relative }, dot { position: absolute }
  dot.style.left = `${e.offsetX}px`;
  dot.style.top = `${e.offsetY}px`;
});

Dot jumps to the click point inside #area using offsetX / offsetY.

🚀 Common Use Cases

• Drawing or sampling pixels on a <canvas> or image.
• Custom sliders and progress bars that use click position as a percentage.
• Placing markers, stickers, or hotspots inside a card or map.
• Unit tests that assert a click at a known local point.
• Replacing non-standard layerX with a standard element-local X.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since December 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Origin is the target’s padding edge (inside the border).
• Value type is a floating-point double in modern engines.
• Related: mozInputSource, clientX, layerX, MouseEvent(), Window, JavaScript hub.

💡 Best Practices