JavaScript MouseEvent offsetX Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word OFFSETX

Definition

MouseEvent.offsetX is a read-only number: how far the pointer is horizontally from the padding edge of the event’s target element (CSS pixels).

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use event.offsetX. Start with this line.

JavaScript
event.offsetX
CallWhat it does
event.offsetXPrimary signature.

Built into the browser. Read event.offsetX on a MouseEvent — no import required.

Library declarations
JavaScript
event.offsetX

Parameters

ParameterDescription
Target elementRequired. Padding box that defines the origin
Element sizeOptional. Needed to convert to percentages

Return Value

Return ValueDescription
*The current value of event.offsetX.

JavaScript Examples

Example 1 — Log offsetX on Click

Read the local X whenever the user clicks the target element.

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

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

How It Works

  1. Select the target. The listener is on #box, so event.target is that element (or a child).
  2. Listen for click. Each click delivers a MouseEvent.
  3. Read offsetX. The value is CSS pixels from the left padding edge.
  4. Show the result. Write the number into the log for quick feedback.

Example 2 — offsetX vs clientX vs pageX

See local, viewport, and document X on the same click.

JavaScript
box.addEventListener("click", (e) => {
  console.log({
    offsetX: e.offsetX, // element padding edge
    clientX: e.clientX, // viewport
    pageX: e.pageX      // document (+ scroll)
  });
});
Try It Yourself

How It Works

  1. One event, three origins. The same click exposes three different X values.
  2. Local first. offsetX answers “where inside this element?”
  3. Viewport next. clientX answers “where in the visible window?”
  4. Document last. pageX includes scroll — useful for page-wide layouts.

Example 3 — Click Position as a Percentage

Normalize local X for sliders, progress bars, or image maps.

JavaScript
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)}%`);
});
Try It Yourself

How It Works

  1. Read local X. offsetX is already relative to the control.
  2. Divide by width. clientWidth is the inner width of the element.
  3. Scale to 0–100. Multiply by 100 and clamp so edges stay in range.
  4. Why it helps. The percentage still makes sense when the control resizes.
Compatibility

Browser Support

MouseEvent.offsetX is Baseline Widely available (MDN: since December 2015). It is not Deprecated, Experimental, or Non-standard.

✓ Baseline · Widely available

MouseEvent.offsetX

Element-local horizontal pointer coordinate from the target’s padding edge — ideal for hit-testing and local drawing.

Universal Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
offsetX Excellent

Bottom line: Safe to use in modern browsers. Pair with offsetY for local 2D points, and use clientX/pageX when you need viewport or document space.

Frequently Asked Questions

It is a read-only number: the horizontal offset of the mouse pointer from the padding edge of the event’s target element, measured in CSS pixels.
No. MDN marks MouseEvent.offsetX as Baseline Widely available (since December 2015). It is not Deprecated, Experimental, or Non-standard.
offsetX is measured from the left padding edge of the target node—inside the border, at the start of the padding box. Borders are outside that origin; padding and content are inside.
clientX is relative to the browser viewport. offsetX is relative to the element that received the event (event.target). The same spot on a moved element keeps a similar offsetX, while clientX changes with the window position.
pageX is relative to the whole document (includes scroll). offsetX stays local to the target element’s padding box and does not grow just because the page scrolled.
A double (floating-point) number in pixels. Early versions of the spec defined it as an integer; modern browsers report a double.

Next: MouseEvent.offsetY

Learn the vertical local coordinate that pairs with offsetX.

offsetY tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript MouseEvent mozInputSource Property JavaScript MouseEvent offsetY Property