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 compatibility

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	(Yes)	(Yes)	6	(Yes)	(Yes)
Redefined from `long` to `double`	56	?	?	?	?	?