Packagecssom.view
Interfacepublic interface MouseEventView
Implementors MouseEvent

Introduced in: DOM 0 
Modified in: DOM 2 Events 

Used to calculate the mouse position relative to the page or screen.

All browser compatibility information was obtained via Quirksmode.

See also

W3C CSSOM Views Specification: MouseEventView
Quirksmode: W3C DOM Compatibility - CSS Object Model View


Public Properties
 PropertyDefined 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 clientXproperty
clientX:Number  [read-only]

Product Versions : Internet Explorer 5.5 Internet Explorer 6.0 Internet Explorer 7.0 Internet Explorer 8.0 as IE7 Internet Explorer 8.0 as IE8 Firefox 2.0 Firefox 3.0 Firefox 3.1b Safari 3.0 Safari 3.1 Safari 4.0b Chrome 1.0 Chrome 2.0 Opera 9.62 Opera 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

See also


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 clientYproperty 
clientY:Number  [read-only]

Product Versions : Internet Explorer 5.5 Internet Explorer 6.0 Internet Explorer 7.0 Internet Explorer 8.0 as IE7 Internet Explorer 8.0 as IE8 Firefox 2.0 Firefox 3.0 Firefox 3.1b Safari 3.0 Safari 3.1 Safari 4.0b Chrome 1.0 Chrome 2.0 Opera 9.62 Opera 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

See also


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 offsetXproperty 
offsetX:Number  [read-only]

Product Versions : Internet Explorer 5.5 Internet Explorer 6.0 Internet Explorer 7.0 Internet Explorer 8.0 as IE7 Internet Explorer 8.0 as IE8 Firefox 2.0 Firefox 3.0 Firefox 3.1b Safari 3.0 Safari 3.1 Safari 4.0b Chrome 1.0 Chrome 2.0 Opera 9.62 Opera 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

See also


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 offsetYproperty 
offsetY:Number  [read-only]

Product Versions : Internet Explorer 5.5 Internet Explorer 6.0 Internet Explorer 7.0 Internet Explorer 8.0 as IE7 Internet Explorer 8.0 as IE8 Firefox 2.0 Firefox 3.0 Firefox 3.1b Safari 3.0 Safari 3.1 Safari 4.0b Chrome 1.0 Chrome 2.0 Opera 9.62 Opera 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.

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 offsetY():Number

See also


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 pageXproperty 
pageX:Number  [read-only]

Product Versions : Internet Explorer 5.5 Internet Explorer 6.0 Internet Explorer 7.0 Internet Explorer 8.0 as IE7 Internet Explorer 8.0 as IE8 Firefox 2.0 Firefox 3.0 Firefox 3.1b Safari 3.0 Safari 3.1 Safari 4.0b Chrome 1.0 Chrome 2.0 Opera 9.62 Opera 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

See also


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 pageYproperty 
pageY:Number  [read-only]

Product Versions : Internet Explorer 5.5 Internet Explorer 6.0 Internet Explorer 7.0 Internet Explorer 8.0 as IE7 Internet Explorer 8.0 as IE8 Firefox 2.0 Firefox 3.0 Firefox 3.1b Safari 3.0 Safari 3.1 Safari 4.0b Chrome 1.0 Chrome 2.0 Opera 9.62 Opera 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

See also


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 screenXproperty 
screenX:Number  [read-only]

Product Versions : Internet Explorer 5.5 Internet Explorer 6.0 Internet Explorer 7.0 Internet Explorer 8.0 as IE7 Internet Explorer 8.0 as IE8 Firefox 2.0 Firefox 3.0 Firefox 3.1b Safari 3.0 Safari 3.1 Safari 4.0b Chrome 1.0 Chrome 2.0 Opera 9.62 Opera 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

See also


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 screenYproperty 
screenY:Number  [read-only]

Product Versions : Internet Explorer 5.5 Internet Explorer 6.0 Internet Explorer 7.0 Internet Explorer 8.0 as IE7 Internet Explorer 8.0 as IE8 Firefox 2.0 Firefox 3.0 Firefox 3.1b Safari 3.0 Safari 3.1 Safari 4.0b Chrome 1.0 Chrome 2.0 Opera 9.62 Opera 10.0a
Introduced in: DOM 0 
Modified in: DOM 2 Events 

Returns the vertical 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 screenY():Number

See also


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 xproperty 
x:Number  [read-only]

Product Versions : Internet Explorer 5.5 Internet Explorer 6.0 Internet Explorer 7.0 Internet Explorer 8.0 as IE7 Internet Explorer 8.0 as IE8 Firefox 2.0 Firefox 3.0 Firefox 3.1b Safari 3.0 Safari 3.1 Safari 4.0b Chrome 1.0 Chrome 2.0 Opera 9.62 Opera 10.0a
Introduced in: DOM 0 
Modified in: DOM 2 Events 

Returns the value of pageX.


Implementation
    public function get x():Number

See also


Example
<body onmousemove="window.status = 'X=' + window.event.x + ' Y=' + window.event.y">
CSSOM View yproperty 
y:Number  [read-only]

Product Versions : Internet Explorer 5.5 Internet Explorer 6.0 Internet Explorer 7.0 Internet Explorer 8.0 as IE7 Internet Explorer 8.0 as IE8 Firefox 2.0 Firefox 3.0 Firefox 3.1b Safari 3.0 Safari 3.1 Safari 4.0b Chrome 1.0 Chrome 2.0 Opera 9.62 Opera 10.0a
Introduced in: DOM 0 
Modified in: DOM 2 Events 

Returns the value of pageY.


Implementation
    public function get y():Number

See also


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