W3cubDocs

MouseEvent.screenX

The screenX read-only property of the MouseEvent property provides the horizontal coordinate (offset) of the mouse pointer in global (screen) coordinates.

Syntax

var pixelNumber = instanceOfMouseEvent.screenX

Return value

A double floating point value. Early versions of the spec defined this as an integer referring to the number of pixels. See the Browser compatibility section for details.

Example

<html>
<head>
<title>screenX\screenY example</title>

<script type="text/javascript">

function showCoords(evt){
  alert(
    "screenX value: " + evt.screenX + "\n"
    + "screenY value: " + evt.screenY + "\n"
  );
}

</script>
</head>

<body onmousedown="showCoords(event)">
<p>To display the mouse coordinates click anywhere on the page.</p>
</body>
</html>

When you trap events on the window, document, or other roomy elements, you can get the coordinates of that event (e.g., a click) and route it properly, as the following example demonstrates:

function checkClickMap(e) {
  if (e.screenX < 50) doRedButton();
  if (50 <= e.screenX && e.screenX < 100) doYellowButton();
  if (e.screenX >= 100) doRedButton();
}

Specifications

Specification	Status	Comment
CSS Object Model (CSSOM) View Module The definition of 'screenX' in that specification.	Working Draft	Redefines `MouseEvent` from long to double.
Document Object Model (DOM) Level 3 Events Specification The definition of 'MouseEvent.screenX' in that specification.	Obsolete	No change from Document Object Model (DOM) Level 2 Events Specification.
Document Object Model (DOM) Level 2 Events Specification The definition of 'MouseEvent.sceenX' in that specification.	Obsolete	Initial definition

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	Yes	Yes	Yes	6	Yes	Yes
Value type changed from `long` to `double`	56	?	?	?	?	?