event.screenX

  • Revision slug: Web/API/event.screenX
  • Revision title: event.screenX
  • Revision id: 476183
  • Created:
  • Creator: rashidtherash
  • Is current revision? No
  • Comment

Revision Content

{{ DomRef() }}

Summary

Returns the horizontal coordinate of the event within the screen as a whole.

Syntax

var pixelNumber = event.screenX; 
  • 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>
function checkClickMap(e) {
  if (e.screenX < 50) doRedButton();
  if (50 <= e.screenX) < 100 doYellowButton();
  if (e.screenX >= 100) doRedButton();
}

Notes

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 "clickMap" example demonstrates.

Specification

screenX

{{ languages( { "pl": "pl/DOM/event.screenX" } ) }}

Revision Source

<p>{{ DomRef() }}</p>
<h3 id="Summary" name="Summary">Summary</h3>
<p>Returns the horizontal coordinate of the event within the screen as a whole.</p>
<h3 id="Syntax" name="Syntax">Syntax</h3>
<pre class="eval">
<em>var pixelNumber</em> = event.screenX; 
</pre>
<ul>
  <li><code>pixelNumber</code> is the offset from the left side of the screen in pixels.</li>
</ul>
<h3 id="Example" name="Example">Example</h3>
<pre>
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;screenX\screenY example&lt;/title&gt;

&lt;script type="text/javascript"&gt;

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

&lt;/script&gt;
&lt;/head&gt;

&lt;body onmousedown="showCoords(event)"&gt;
&lt;p&gt;To display the mouse coordinates click anywhere on the page.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<pre>
function checkClickMap(e) {
  if (e.screenX &lt; 50) doRedButton();
  if (50 &lt;= e.screenX) &lt; 100 doYellowButton();
  if (e.screenX &gt;= 100) doRedButton();
}
</pre>
<h3 id="Notes" name="Notes">Notes</h3>
<p>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 "clickMap" example demonstrates.</p>
<h3 id="Specification" name="Specification">Specification</h3>
<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-screenX">screenX </a></p>
<p>{{ languages( { "pl": "pl/DOM/event.screenX" } ) }}</p>
Revert to this revision