JavaScript MouseEvent screenX Property

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

Definition

MouseEvent.screenX is a read-only number: the horizontal pointer position in CSS pixels from the left edge of the screen (monitor), not the browser window or the document.

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

Syntax

Use event.screenX. Start with this line.

JavaScript
event.screenX
CallWhat it does
event.screenXPrimary signature.

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

Library declarations
JavaScript
event.screenX

Parameters

ParameterDescription
Mouse / pointer eventRequired. Source of screenX

Return Value

Return ValueDescription
*The current value of event.screenX.

JavaScript Examples

Example 1 — Log screenX / screenY

Print screen coordinates while you move (MDN-style demo).

JavaScript
const log = document.getElementById("screen-log");

document.addEventListener("mousemove", (e) => {
  log.textContent =
    `Screen X/Y: ${e.screenX}, ${e.screenY}\n` +
    `Client X/Y: ${e.clientX}, ${e.clientY}`;
});
Try It Yourself

How It Works

  1. Listen for moves. Each mousemove delivers a fresh MouseEvent.
  2. Read screen coords. screenX / screenY are relative to the monitor.
  3. Show client too. Side-by-side makes the two spaces obvious.
  4. Watch the gap. Moving the browser window changes screenX more than clientX.

Example 2 — screenX vs clientX vs pageX

Three horizontal spaces on one click.

JavaScript
document.addEventListener("click", (e) => {
  console.log({
    screenX: e.screenX, // monitor
    clientX: e.clientX, // viewport
    pageX: e.pageX      // document (+ scroll)
  });
});
Try It Yourself

How It Works

  1. One click, three numbers. Same event carries all coordinate spaces.
  2. Screen. screenX places the pointer on the monitor.
  3. Viewport. clientX places it in the visible window.
  4. Document. pageX places it on the full page (scroll included).

Example 3 — Simple Screen Zones

Route by screen X — the idea behind MDN’s checkClickMap sample.

JavaScript
function zone(screenX) {
  if (screenX < 50) return "left";
  if (screenX < 100) return "middle";
  return "right";
}

document.addEventListener("click", (e) => {
  console.log(e.screenX, "→", zone(e.screenX));
});
Try It Yourself

How It Works

  1. Pick thresholds. Tiny bands (50 / 100) keep the demo easy to read.
  2. Read screenX. The zone depends on monitor position, not the page.
  3. Return a label. Map ranges to simple names for routing.
  4. Real apps: prefer viewport or element geometry for UI; use screen coords for monitor-aware tools.
Compatibility

Browser Support

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

✓ Baseline · Widely available

MouseEvent.screenX

Screen-relative horizontal pointer coordinate — monitor space, independent of document scroll.

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
screenX Excellent

Bottom line: Safe to use in modern browsers. Pair with screenY for screen points; use clientX / pageX for viewport and document work.

Frequently Asked Questions

It is a read-only number: the horizontal mouse position in CSS pixels relative to the left edge of the user’s screen (monitor), not the browser window or the document.
No. MDN marks MouseEvent.screenX as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
clientX is measured from the viewport’s left edge (the visible browser window). screenX is measured from the screen’s left edge. Moving or resizing the window changes how they relate.
pageX is relative to the document and includes horizontal scroll. screenX ignores page scroll — it is screen-space.
MDN: in a multiscreen environment, screens aligned horizontally are treated as one device, so screenX can grow across the combined width of those screens.
A double floating-point value in pixels (MDN). Early specs defined it as an integer; modern engines expose a double. Pair with screenY for a full screen point.

Next: MouseEvent.screenY

Learn the vertical pointer position relative to the whole screen.

screenY 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 relatedTarget Property JavaScript MouseEvent screenY Property