MouseEvent.screenX

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

Syntax

var pixelNumber = instanceOfMouseEvent.screenX

Return value

pixelNumber is the offset from the left side of the screen in pixels.

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
Document Object Model (DOM) Level 3 Events Specification The definition of 'MouseEvent.screenX' in that specification.	Working Draft	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.	Recommendation	Initial definition

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)

Feature	Firefox Mobile (Gecko)	Android	IE Mobile	Opera Mobile	Safari Mobile
Basic support	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)