JavaScript MouseEvent screenX Property

What You’ll Learn

MouseEvent.screenX is a read-only number: the mouse’s horizontal position relative to the screen (monitor), not the page or the viewport. Learn how it differs from clientX and pageX, multi-monitor behavior, and five try-it labs.

Introduction

Sometimes you care about where the pointer sits on the physical display—not where it is inside the scrolled page or the browser chrome. That is screenX (horizontal) and screenY (vertical): coordinates in screen space.

document.addEventListener("mousemove", (event) => {
  console.log(event.screenX); // pixels from screen left
});

Understanding the Property

MDN: screenX provides the horizontal coordinate (offset) of the mouse pointer in screen coordinates. In a multiscreen setup, horizontally aligned screens are treated as one device, so the range of screenX can span their combined width.

• Instance — read event.screenX in a handler.
• Number — CSS pixels; a floating-point double.
• Screen-relative — independent of page scroll.
• Read-only — set via constructor options on synthetic events only.

📝 Syntax

const x = mouseEvent.screenX;

Value

A double floating-point value in pixels (MDN). Early versions of the specification defined this as an integer; modern engines expose a double for subpixel precision.

⚖️ screenX vs Other X Coordinates

Mental model: use screenX for display-relative work, clientX for viewport UI, and pageX for document markers. Pair screenX with screenY for a full screen point.

Examples Gallery

Examples follow MDN MouseEvent.screenX. Move the mouse and (if you can) drag the browser window to see screen vs viewport values.

const screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);

function logKey(e) {
  screenLog.innerText = `
    Screen X/Y: ${e.screenX}, ${e.screenY}
    Client X/Y: ${e.clientX}, ${e.clientY}`;
}

Screen X/Y: 842, 410
Client X/Y: 180, 96

function checkClickMap(e) {
  if (e.screenX < 50) {
    console.log("left band");
  } else if (e.screenX < 100) {
    console.log("middle band");
  } else {
    console.log("right band");
  }
}

document.addEventListener("click", checkClickMap);

right band

const event = new MouseEvent("click", {
  screenX: 640,
  screenY: 360,
  bubbles: true
});

console.log(event.screenX); // 640
console.log(event.screenY); // 360

640
360

document.addEventListener("mousemove", (e) => {
  console.log({
    screenX: e.screenX, // monitor
    clientX: e.clientX, // viewport
    pageX: e.pageX,     // document
    scrollX: window.scrollX
  });
});

{
  screenX: 910,
  clientX: 240,
  pageX: 240,
  scrollX: 0
}

document.addEventListener("mousemove", (e) => {
  // Approximate: how far the viewport is from the screen's left
  const approxWindowLeft = e.screenX - e.clientX;
  console.log(approxWindowLeft);
});

670

🚀 Common Use Cases

• Debugging pointer position relative to the physical display.
• Teaching screen vs viewport vs document coordinate systems.
• Simple screen-band routing demos (as on MDN).
• Synthetic events in tests with known screenX / screenY.
• Understanding multi-monitor horizontal ranges.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Horizontally aligned multi-monitor setups can widen the screenX range.
• Value type is a floating-point double in modern engines.
• Related: relatedTarget, clientX, pageX, MouseEvent(), Window, JavaScript hub.

💡 Best Practices