cssom.view.MouseEventView

	Property	Defined By
		CSSOM View clientX : Number [read-only] Returns the horizontal coordinate within the application's client area at which the event occurred (as opposed to the coordinates within the page).	MouseEventView
		CSSOM View clientY : Number [read-only] Returns the vertical coordinate within the application's client area at which the event occurred (as opposed to the coordinates within the page).	MouseEventView
		CSSOM View offsetX : Number [read-only] Returns the horizontal coordinate, as number of CSS pixels, of the position where the event occurred relative to the origin of the padding box of the target node.	MouseEventView
		CSSOM View offsetY : Number [read-only] Returns the vertical coordinate, as number of CSS pixels, of the position where the event occurred relative to the origin of the padding box of the target node.	MouseEventView
		CSSOM View pageX : Number [read-only] Returns the horizontal coordinate of the event relative to whole document.	MouseEventView
		CSSOM View pageY : Number [read-only] Returns the vertical coordinate of the event relative to the whole document.	MouseEventView
		CSSOM View screenX : Number [read-only] Returns the horizontal coordinate of the event within the screen as a whole.	MouseEventView
		CSSOM View screenY : Number [read-only] Returns the vertical coordinate of the event within the screen as a whole.	MouseEventView
		CSSOM View x : Number [read-only] Returns the value of pageX.	MouseEventView
		CSSOM View y : Number [read-only] Returns the value of pageY.	MouseEventView

Property Detail

CSSOM View clientX

property

clientX:Number [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 2 Events

Returns the horizontal coordinate within the application's client area at which the event occurred (as opposed to the coordinates within the page).

For example, clicking in the top-left corner of the client area will always result in a mouse event with a clientX value of 0, regardless of whether the page is scrolled horizontally.

Implementation
public function get clientX():Number

Example

         <html>
         <head>
             <title>clientX\clientY example</title>
         
             <script type="text/javascript">
                 function showCoords(evt) {
                     alert(
                     "clientX value: " + evt.clientX + "\n"
                     + "clientY value: " + evt.clientY + "\n"
                 );
                 }
             </script>
         </head>
         
         <body onmousedown="showCoords(event)">
             <p>To display the mouse coordinates click anywhere on the page.</p>
         </body>
         </html>

CSSOM View clientY

property

clientY:Number [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 2 Events

Returns the vertical coordinate within the application's client area at which the event occurred (as opposed to the coordinates within the page).

For example, clicking in the top-left corner of the client area will always result in a mouse event with a clientY value of 0, regardless of whether the page is scrolled vertically.

Implementation
public function get clientY():Number

Example

         <html>
             <head>
                 <title>clientX\clientY example</title>
         
                 <script type="text/javascript">
                     function showCoords(evt){
                         alert(
                         "clientX value: " + evt.clientX + "\n"
                         + "clientY value: " + evt.clientY + "\n"
                     );
                     }
                 </script>
             </head>
         
             <body onmousedown="showCoords(event)">
                 <p>To display the mouse coordinates click anywhere on the page.</p>
             </body>
         </html>

CSSOM View offsetX

property

offsetX:Number [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 2 Events

Returns the horizontal coordinate, as number of CSS pixels, of the position where the event occurred relative to the origin of the padding box of the target node.

In IE the coordinates are calculated relative to the target element when that element is eligible to become an offsetParent. If that's not the case, the coordinates are calculated relative to the target's offsetParent.

Note (Safari/Chrome): Safari and Chrome calculate the position not from the padding box (as per the spec) but form the border box.

Note (Opera): Opera calculates the position from the content box instead of the padding box.

Implementation
public function get offsetX():Number

Example

         <head>
             <script>
                 function offsetCoords() {
                     var offsetInfo = ""
                     offsetInfo = "The x coordinate is: " + window.event.offsetX + "\r"
                     offsetInfo += "The y coordinate is: " + window.event.offsetY + "\r"
                     alert(offsetInfo);
                 }
             </script>
         </head>
         <body onmousemove="window.status = 'X=' + window.event.offsetX + 
         ' Y=' + window.event.offsetY" ondblclick="offsetCoords()">
             ...
             <div onclick="offsetCoords();" ... position:absolute; top:200; left:300;">
             ...
             </div>
         </body>

CSSOM View offsetY

property

offsetY:Number [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 2 Events

Returns the vertical coordinate, as number of CSS pixels, of the position where the event occurred relative to the origin of the padding box of the target node.

Note (Safari/Chrome): Safari and Chrome calculate the position not from the padding box (as per the spec) but form the border box.

Note (Opera): Opera calculates the position from the content box instead of the padding box.

Implementation
public function get offsetY():Number

Example

         <head>
             <script>
                 function offsetCoords() {
                     var offsetInfo = ""
                     offsetInfo = "The x coordinate is: " + window.event.offsetX + "\r"
                     offsetInfo += "The y coordinate is: " + window.event.offsetY + "\r"
                     alert(offsetInfo);
                 }
             </script>
         </head>
         <body onmousemove="window.status = 'X=' + window.event.offsetX + 
         ' Y=' + window.event.offsetY" ondblclick="offsetCoords()">
             ...
             <div onclick="offsetCoords();" ... position:absolute; top:200; left:300;">
             ...
             </div>
         </body>

CSSOM View pageX

property

pageX:Number [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 2 Events

Returns the horizontal coordinate of the event relative to whole document.

Note (IE): In order to get it in IE, too, add the scrolling offset of the document to clientX/Y.

Implementation
public function get pageX():Number

Example

         <html>
         <head>
         <title>pageX\pageY & layerX\layerY example</title>
         
         <script type="text/javascript">
             function showCoords(evt){
                 var form = document.forms.form_coords;
                 var parent_id = evt.target.parentNode.id;
                 form.parentId.value = parent_id;
                 form.pageXCoords.value = evt.pageX;
                 form.pageYCoords.value = evt.pageY;
                 form.layerXCoords.value = evt.layerX;
                 form.layerYCoords.value = evt.layerY;
             }
         </script>
         
         <style type="text/css">
         
         #d1 {
             border: solid blue 1px;
             padding: 20px;
         }
         
         #d2 {
             position: absolute;
             top: 180px;
             left: 80%;
             right:auto;
             width: 40%;
             border: solid blue 1px;
             padding: 20px;
         }
         
         #d3 {
             position: absolute;
             top: 240px;
             left: 20%;
             width: 50%;
             border: solid blue 1px;
             padding: 10px;
         }
         
         </style>
         </head>
         
         <body onmousedown="showCoords(event)">
         
         <p>To display the mouse coordinates please click anywhere on the page.</p>
         
         <div id="d1">
             <span>This is an un-positioned div so clicking it will return
             layerX/layerY values almost the same as pageX/PageY values.</span>
         </div>
         
         <div id="d2">
             <span>This is a positioned div so clicking it will return layerX/layerY
             values that are relative to the top-left corner of this positioned
             element. Note the pageX\pageY properties still return the
             absolute position in the document, including page scrolling.</span>
         
             <span>Make the page scroll more! This is a positioned div so clicking it
             will return layerX/layerY values that are relative to the top-left
             corner of this positioned element. Note the pageX\pageY properties still
             return the absolute position in the document, including page
             scrolling.</span>
         </div>
         
         <div id="d3">
             <form name="form_coords">
                 Parent Element id: <input type="text" name="parentId" size="7" /><br />
                 pageX:<input type="text" name="pageXCoords" size="7" />  
                 pageY:<input type="text" name="pageYCoords" size="7" /><br />
                 layerX:<input type="text" name="layerXCoords" size="7" />  
                 layerY:<input type="text" name="layerYCoords" size="7" />
             </form>
         </div>
         
         </body>
         </html>

CSSOM View pageY

property

pageY:Number [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 2 Events

Returns the vertical coordinate of the event relative to the whole document.

Note (IE): In order to get it in IE, too, add the scrolling offset of the document to clientX/Y.

Implementation
public function get pageY():Number

Example

         <html>
         <head>
         <title>pageX\pageY & layerX\layerY example</title>
         
         <script type="text/javascript">
             function showCoords(evt){
                 var form = document.forms.form_coords;
                 var parent_id = evt.target.parentNode.id;
                 form.parentId.value = parent_id;
                 form.pageXCoords.value = evt.pageX;
                 form.pageYCoords.value = evt.pageY;
                 form.layerXCoords.value = evt.layerX;
                 form.layerYCoords.value = evt.layerY;
             }
         </script>
         
         <style type="text/css">
         
         #d1 {
             border: solid blue 1px;
             padding: 20px;
         }
         
         #d2 {
             position: absolute;
             top: 180px;
             left: 80%;
             right:auto;
             width: 40%;
             border: solid blue 1px;
             padding: 20px;
         }
         
         #d3 {
             position: absolute;
             top: 240px;
             left: 20%;
             width: 50%;
             border: solid blue 1px;
             padding: 10px;
         }
         
         </style>
         </head>
         
         <body onmousedown="showCoords(event)">
         
         <p>To display the mouse coordinates please click anywhere on the page.</p>
         
         <div id="d1">
             <span>This is an un-positioned div so clicking it will return
             layerX/layerY values almost the same as pageX/PageY values.</span>
         </div>
         
         <div id="d2">
             <span>This is a positioned div so clicking it will return layerX/layerY
             values that are relative to the top-left corner of this positioned
             element. Note the pageX\pageY properties still return the
             absolute position in the document, including page scrolling.</span>
         
             <span>Make the page scroll more! This is a positioned div so clicking it
             will return layerX/layerY values that are relative to the top-left
             corner of this positioned element. Note the pageX\pageY properties still
             return the absolute position in the document, including page
             scrolling.</span>
         </div>
         
         <div id="d3">
             <form name="form_coords">
                 Parent Element id: <input type="text" name="parentId" size="7" /><br />
                 pageX:<input type="text" name="pageXCoords" size="7" />  
                 pageY:<input type="text" name="pageYCoords" size="7" /><br />
                 layerX:<input type="text" name="layerXCoords" size="7" />  
                 layerY:<input type="text" name="layerYCoords" size="7" />
             </form>
         </div>
         
         </body>
         </html>

CSSOM View screenX

property

screenX:Number [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 2 Events

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

Note: 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.

Implementation
public function get screenX():Number

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();
         }

CSSOM View screenY

property

screenY:Number [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 2 Events

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

Implementation
public function get screenY():Number

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();
         }

CSSOM View x

property

x:Number [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 2 Events

Returns the value of pageX.

Implementation
public function get x():Number

Example

<body onmousemove="window.status = 'X=' + window.event.x + ' Y=' + window.event.y">

CSSOM View y

property

y:Number [read-only]

Product Versions :

5.5

6.0

7.0

8.0 as IE7

8.0 as IE8

2.0

3.0

3.1b

3.0

3.1

4.0b

1.0

2.0

9.62

10.0a

Introduced in:	DOM 0
Modified in:	DOM 2 Events

Returns the value of pageY.

Implementation
public function get y():Number

Example

<body onmousemove="window.status = 'X=' + window.event.x + ' Y=' + window.event.y">

Mon Aug 17 2009, 10:08 AM -04:00

DOM Reference Manual		All Packages \| All Classes \| Index \| Frames No Frames
MouseEventView	Properties

Package	cssom.view
Interface	public interface MouseEventView
Implementors	MouseEvent