event.screenX

  • Revision slug: DOM/event.screenX
  • Revision title: event.screenX
  • Revision id: 130874
  • Created:
  • Creator: Jabez
  • Is current revision? No
  • Comment /* Example */

Revision Content

{{template.DomRef()}}

Summary

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

Syntax

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

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

Revision Source

<p>
{{template.DomRef()}}
</p>
<h3 name="Summary">Summary</h3>
<p>Returns the horizontal coordinate of the event within the screen as a whole.. 
</p>
<h3 name="Syntax">Syntax </h3>
<pre class="eval"><i>pixelNumber</i> = event.screenX 
</pre>
<ul><li><code>pixelNumber</code> is the offset from the left side of the screen in pixels.
</li></ul>
<h3 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 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 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>{{ wiki.languages( { "pl": "pl/DOM/event.screenX" } ) }}
Revert to this revision