dom.events.MouseEvent

	Property	Defined By
		DOM 2 Events altKey : Boolean [read-only] Refer to the KeyboardEvent.altKey attribute.	MouseEvent
		DOM 2 Events bubbles : Boolean [read-only] Used to indicate whether or not an event is a bubbling event.	Event
		DOM 2 Events button : Number [read-only] Returns an integer value indicating the button that changed state.	MouseEvent
		DOM 2 Events cancelable : Boolean [read-only] Indicates whether the event is cancelable or not.	Event
		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).	MouseEvent
		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).	MouseEvent
		DOM 2 Events ctrlKey : Boolean [read-only] Refer to the KeyboardEvent.ctrlKey attribute.	MouseEvent
		DOM 2 Events currentTarget : EventTarget [read-only] Identifies the current target for the event, as the event traverses the DOM.	Event
		DOM 3 Events defaulPrevented : Boolean [read-only] Used to indicate whether Event.preventDefault() has been called for this event.	Event
		DOM 2 Events detail : Number [read-only] Specifies some detail information about the Event, depending on the type of event.	UIEvent
		DOM 2 Events eventPhase : Number [read-only] Used to indicate which phase of event flow is currently being accomplished.	Event
		Non-Standard explicitOriginalTarget : nsIDOMEventTarget [read-only] The explicit original target of the event.	Event
		Non-Standard isChar : Boolean [read-only] Returns a boolean indicating whether the event produced a key character or not.	UIEvent
		Non-Standard isTrusted : Boolean [read-only] Determines if the event was from the user or script generated.	Event
		Non-Standard layerX : Number [read-only] Returns the horizontal coordinate of the event relative to the current layer.	UIEvent
		Non-Standard layerY : Number [read-only] Returns the vertical coordinate of the event relative to the current layer.	UIEvent
		DOM 2 Events metaKey : Boolean [read-only] Refer to the KeyboardEvent.metaKey attribute.	MouseEvent
		DOM 3 Events namespaceURI : DOMString [read-only] The namespace URI associated with this event at initialization time, or null if it is unspecified.	Event
		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.	MouseEvent
		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.	MouseEvent
		Non-Standard originalTarget : * [read-only] The original target of the event before any retargetings.	Event
		CSSOM View pageX : Number [override] [read-only] Returns the horizontal coordinate of the event relative to whole document.	MouseEvent
		CSSOM View pageY : Number [override] [read-only] Returns the vertical coordinate of the event relative to the whole document.	MouseEvent
		DOM 2 Events relatedTarget : EventTarget [read-only] Used to identify a secondary EventTarget related to a UI event, depending on the type of event.	MouseEvent
		CSSOM View screenX : Number [read-only] Returns the horizontal coordinate of the event within the screen as a whole.	MouseEvent
		CSSOM View screenY : Number [read-only] Returns the vertical coordinate of the event within the screen as a whole.	MouseEvent
		DOM 2 Events shiftKey : Boolean [read-only] Refer to the KeyboardEvent.shiftKey attribute.	MouseEvent
		DOM 2 Events target : EventTarget [read-only] Used to indicate the event target.	Event
		DOM 2 Events timeStamp : DOMTimeStamp [read-only] Used to specify the time at which the event was created in milliseconds relative to 1970-01-01T00:00:00Z.	Event
		DOM 2 Events type : DOMString [read-only] The local name of the event type.	Event
		DOM 2 Events view : AbstractView [read-only] Returns the AbstractView object from which the event was generated.	UIEvent
		Non-Standard which : DOMString [read-only] Returns the numeric keyCode of the key pressed, or the character code (charCode) for an alphanumeric key pressed.	UIEvent
		CSSOM View x : Number [read-only] Returns the value of pageX.	MouseEvent
		CSSOM View y : Number [read-only] Returns the value of pageY.	MouseEvent

	Method	Defined By
		DOM 3 Events getModifierState(keyIdentifierArg:DOMString):Boolean Queries the state of a modifier using a key identifier.	MouseEvent
		DOM 2 Events initEvent(typeArg:DOMString, canBubbleArg:Boolean, cancelableArg:Boolean):void Initializes attributes of an Event created through the DocumentEvent.createEvent method.	Event
		DOM 3 Events initEventNS(namespaceURIArg:DOMString, typeArg:DOMString, canBubbleArg:Boolean, cancelableArg:Boolean):void Initializes attributes of an Event object.	Event
		DOM 2 Events initMouseEvent(typeArg:DOMString, canBubbleArg:Boolean, cancelableArg:Boolean, viewArg:AbstractView, detailArg:Number, screenXArg:Number, screenYArg:Number, clientXArg:Number, clientYArg:Number, ctrlKeyArg:Boolean, altKeyArg:Boolean, shiftKeyArg:Boolean, metaKeyArg:Boolean, buttonArg:Number, relatedTargetArg:EventTarget):void Initializes attributes of a MouseEvent object.	MouseEvent
		DOM 3 Events initMouseEventNS(namespaceURIArg:DOMString, typeArg:DOMString, canBubbleArg:Boolean, cancelableArg:Boolean, viewArg:AbstractView, detailArg:Number, screenXArg:Number, screenYArg:Number, clientXArg:Number, clientYArg:Number, ctrlKeyArg:Boolean, altKeyArg:Boolean, shiftKeyArg:Boolean, metaKeyArg:Boolean, buttonArg:Number, relatedTargetArg:EventTarget, modifiersListArg:DOMString):void Initializes attributes of a MouseEvent object.	MouseEvent
		DOM 2 Events initUIEvent(typeArg:DOMString, canBubbleArg:Boolean, cancelableArg:Boolean, viewArg:AbstractView, detailArg:Number):void Initializes attributes of an UIEvent object.	UIEvent
		DOM 3 Events initUIEventNS(namespaceURIArg:DOMString, typeArg:DOMString, canBubbleArg:Boolean, cancelableArg:Boolean, viewArg:AbstractView, detailArg:Number):void Initializes attributes of an UIEvent object.	UIEvent
		Obsolete preventBubble():void Prevents the event from bubbling.	Event
		Obsolete preventCapture():void This method is deprecated in favor of standard stopPropagation and is removed in Gecko 1.9.	Event
		DOM 2 Events preventDefault():void Cancels the event if it is cancelable, without stopping further propagation of the event.	Event
		DOM 3 Events stopImmediatePropogation():void Prevents other event listeners from being triggered and, unlike Event.stopPropagation() its effect is immediate .	Event
		DOM 2 Events stopPropogation():void Prevents other event listeners from being triggered but its effect is deferred until all event listeners attached on the Event.currentTarget have been triggered .	Event

	Constant	Defined By
		HTML 4.0 abort : String = abort [static] Loading of a resource has been aborted.	UIEvent
		DOM 2 Events AT_TARGET : Number = 2 [static] The current event is in the target phase, i.e.	Event
		DOM 2 Events blur : String = blur [static] An event target loses focus.	UIEvent
		DOM 2 Events BUBBLING_PHASE : Number = 3 [static] The current event phase is the bubbling phase.	Event
		DOM 2 Events CAPTURING_PHASE : Number = 1 [static] The current event phase is the capture phase.	Event
		HTML 4.0 change : String = change [static] A control loses the input focus and its value has been modified since gaining focus.	UIEvent
		HTML 4.01 click : String = click [static] A pointing device button is clicked over an element.	MouseEvent
		HTML 4.01 dblclick : String = dblclick [static] A pointing device button is clicked twice over an element.	MouseEvent
		DOM 2 Events DOMActivate : String = DOMActivate [static] Refer to Activation requests and behavior.	UIEvent
		DOM 2 Events DOMFocusIn : String = DOMFocusIn [static] An event target receives focus.	UIEvent
		DOM 2 Events DOMFocusOut : String = DOMFocusOut [static] An event target loses focus.	UIEvent
		HTML 4.0 error : String = error [static] A resource failed to load, or has been loaded but cannot be interpreted according to its semantics such as an invalid image, a script execution error, or non-well-formed XML.	UIEvent
		DOM 2 Events focus : String = focus [static] An event target receives focus.	UIEvent
		HTML 4.0 load : String = load [static] The DOM Implementation finishes loading the resource (such as the document) and any dependent resources (such as images, style sheets, or scripts).	UIEvent
		HTML 4.01 mousedown : String = mousedown [static] A pointing device button is pressed over an element.	MouseEvent
		HTML 4.01 mousemove : String = mousemove [static] A pointing device is moved while it is over an element.	MouseEvent
		HTML 4.01 mouseout : String = mouseout [static] A pointing device is moved away from an element.	MouseEvent
		HTML 4.01 mouseover : String = mouseover [static] A pointing device is moved onto an element.	MouseEvent
		HTML 4.01 mouseup : String = mouseup [static] A pointing device button is released over an element.	MouseEvent
		HTML 4.0 reset : String = reset [static] A form, such as a [HTML 4.01] or [XHTML 1.0] form, is reset.	UIEvent
		DOM 2 Events resize : String = resize [static] A document view or an element has been resized.	UIEvent
		DOM 2 Events scroll : String = scroll [static] A document view or an element has been scrolled.	UIEvent
		HTML 4.0 select : String = select [static] A user selects some text.	UIEvent
		HTML 4.0 submit : String = submit [static] A form, such as a [HTML 4.01] or [XHTML 1.0] form, is submitted.	UIEvent
		HTML 4.0 unload : String = unload [static] The DOM implementation removes from the environment the resource (such as the document) or any dependent resources (such as images, style sheets, scripts).	UIEvent

Property Detail

DOM 2 Events altKey

property

altKey:Boolean [read-only]

Introduced in:

DOM 2 Events

Refer to the KeyboardEvent.altKey attribute.

Implementation
public function get altKey():Boolean

See also

W3C - MouseEvent.altKey

DOM 2 Events button

property

button:Number [read-only]

Introduced in:

DOM 2 Events

Returns an integer value indicating the button that changed state. Some mice may provide or simulate more buttons, and values higher than 2 can be used to represent such buttons.

Title	Value
Namespace	`None`
`0`	Standard 'click', usually left button
`1`	Middle button, usually wheel-click
`2`	Right button, usually right-click
Context info	MouseEvent.screenX, MouseEvent.screenY, MouseEvent.clientX, MouseEvent.clientY, MouseEvent.altKey, MouseEvent.ctrlKey, MouseEvent.shiftKey, MouseEvent.metaKey, MouseEvent.button, and UIEvent.view are in use. The UIEvent.detail attribute indicates the current click count incremented by one.

Note: Because mouse clicks are frequently intercepted by the user interface, it may be difficult to detect buttons other than those for a standard mouse click (usually the left button) in some circumstances.

Note: Users may change the configuration of buttons on their pointing device so that if an event's button property is zero, it may not have been caused by the button that is physically left–most on the pointing device; however, it should behave as if the left button was clicked in the standard button layout.

Implementation
public function get button():Number

Example

         <script type="text/javascript">
         
         function whichButton(e) {
             // Handle different event models
             var e = e || window.event;
             var btnCode;
         
             if ('object' == typeof e) {
                 btnCode = e.button;
         
                 switch (btnCode) {
                     case 0 : alert('Left button clicked');
                     break;
                     case 1 : alert('Middle button clicked');
                     break;
                     case 2 : alert('Right button clicked');
                     break;
                     default: alert('Unexpected code: ' + btnCode);
                 }
             }
         }
         
         </script>
         
         <p onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">Click with mouse...</p>

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>

DOM 2 Events ctrlKey

property

ctrlKey:Boolean [read-only]

Introduced in:

DOM 2 Events

Refer to the KeyboardEvent.ctrlKey attribute.

Implementation
public function get ctrlKey():Boolean

See also

W3C - MouseEvent.ctrlKey

DOM 2 Events metaKey

property

metaKey:Boolean [read-only]

Introduced in:

DOM 2 Events

Refer to the KeyboardEvent.metaKey attribute.

Implementation
public function get metaKey():Boolean

Example

         function goInput(e) {
             // checks metaKey and
             if (e.metaKey) {
                 // passes event along
                 superSizeOutput(e);
             } else {
                 doOutput(e);
             }
         }

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] [override]

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] [override]

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>

DOM 2 Events relatedTarget

property

relatedTarget:EventTarget [read-only]

Introduced in:

DOM 2 Events

Used to identify a secondary EventTarget related to a UI event, depending on the type of event.

Note: The relatedTarget property is used to find the other element, if any, involved in an event. Events like mouseover are oriented around a certain target, but also involve a secondary target, such as the target that is exited as the mouseover event fires for the primary target.

Implementation
public function get relatedTarget():EventTarget

Example

         var rel = event.relatedTarget;
         // dump("LEAVING " + (rel ? rel.localName : "null") + "\n");
         // relatedTarget is null when the titletip is first shown:
         // a mouseout event fires because the mouse is exiting 
         // the main window and entering the titletip "window".
         // relatedTarget is also null when the mouse exits the main 
         // window completely, so count how many times relatedTarget 
         // was null after titletip is first shown and hide popup
         // the 2nd time
         if (!rel) {
             if (++this._mouseOutCount > 1)
             this.hidePopup();
             return;
         }
         // find out if the node we are entering is one of our 
         // anonymous children
         while (rel) {
             if (rel == this) {
                 break;
             }
             rel = rel.parentNode;
         }
         // if the entered node is not a descendant of ours, hide 
         // the tooltip
         if (rel != this && this._isMouseOver) {
             this.hidePopup();
         }

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

DOM 2 Events shiftKey

property

shiftKey:Boolean [read-only]

Introduced in:

DOM 2 Events

Refer to the KeyboardEvent.shiftKey attribute.

Implementation
public function get shiftKey():Boolean

Example

         <html>
         <head>
         <title>shiftKey example</title>
         
         <script type="text/javascript">
         
         function showChar(e){
             alert(
                 "Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
                 + "charCode: " + e.charCode + "\n"
                 + "SHIFT key pressed: " + e.shiftKey + "\n"
                 + "ALT key pressed: " + e.altKey + "\n"
             );
         }
         
         </script>
         </head>
         
         <body onkeypress="showChar(event);">
         <p>Press any character key, with or without holding down
         the SHIFT key.<br />
         You can also use the SHIFT key together with the ALT key.</p>
         </body>
         </html>

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">

Method Detail

DOM 3 Events getModifierState

()

method

public function getModifierState(keyIdentifierArg:DOMString):Boolean

Introduced in:

DOM 3 Events

Queries the state of a modifier using a key identifier.

Parameters

keyIdentifierArg:DOMString — Refer to the KeyboardEvent.getModifierState() method for a description of this parameter. Note: If an application wishes to distinguish between right and left modifiers, this information could be deduced using keyboard events and KeyboardEvent.keyLocation.

Returns

Boolean — If it is a modifier key and the modifier is activated

See also

W3C - MouseEvent.getModifierState()

DOM 2 Events initMouseEvent

()

method

 public function initMouseEvent(typeArg:DOMString, canBubbleArg:Boolean, cancelableArg:Boolean, viewArg:AbstractView, detailArg:Number, screenXArg:Number, screenYArg:Number, clientXArg:Number, clientYArg:Number, ctrlKeyArg:Boolean, altKeyArg:Boolean, shiftKeyArg:Boolean, metaKeyArg:Boolean, buttonArg:Number, relatedTargetArg:EventTarget):void

Introduced in:

DOM 2 Events

Initializes attributes of a MouseEvent object. This method has the same behavior as UIEvent.initUIEvent().

Parameters

	`typeArg:DOMString` — Specifies Event.type, the local name of the event type.

	`canBubbleArg:Boolean` — Specifies Event.bubbles. This parameter overrides the intrinsic bubbling behavior of the event.

	`cancelableArg:Boolean` — Specifies Event.cancelable. This parameter overrides the intrinsic cancelable behavior of the event.

	`viewArg:AbstractView` — Specifies UIEvent.view. This value may be null.

	`detailArg:Number` — Specifies UIEvent.detail.

	`screenXArg:Number` — Specifies MouseEvent.screenX.

	`screenYArg:Number` — Specifies MouseEvent.screenY.

	`clientXArg:Number` — Specifies MouseEvent.clientX.

	`clientYArg:Number` — Specifies MouseEvent.clientY.

	`ctrlKeyArg:Boolean` — Specifies MouseEvent.ctrlKey.

	`altKeyArg:Boolean` — Specifies MouseEvent.altKey.

	`shiftKeyArg:Boolean` — Specifies MouseEvent.shiftKey.

	`metaKeyArg:Boolean` — Specifies MouseEvent.metaKey.

	`buttonArg:Number` — Specifies MouseEvent.button

	`relatedTargetArg:EventTarget` — Specifies MouseEvent.relatedTarget. This value may be null.

See also

W3C - MouseEvent.initMouseEvent()

DOM 3 Events initMouseEventNS

()

method

 public function initMouseEventNS(namespaceURIArg:DOMString, typeArg:DOMString, canBubbleArg:Boolean, cancelableArg:Boolean, viewArg:AbstractView, detailArg:Number, screenXArg:Number, screenYArg:Number, clientXArg:Number, clientYArg:Number, ctrlKeyArg:Boolean, altKeyArg:Boolean, shiftKeyArg:Boolean, metaKeyArg:Boolean, buttonArg:Number, relatedTargetArg:EventTarget, modifiersListArg:DOMString):void

Introduced in:

DOM 3 Events

Initializes attributes of a MouseEvent object. This method has the same behavior as UIEvent.initUIEventNS().

Parameters

	`namespaceURIArg:DOMString` — Specifies Event.namespaceURI, the namespace URI associated with this event, or null if no namespace.

	`typeArg:DOMString` — Specifies Event.type, the local name of the event type.

	`canBubbleArg:Boolean` — Specifies Event.bubbles. This parameter overrides the intrinsic bubbling behavior of the event.

	`cancelableArg:Boolean` — Specifies Event.cancelable. This parameter overrides the intrinsic cancelable behavior of the event.

	`viewArg:AbstractView` — Specifies UIEvent.view. This value may be null.

	`detailArg:Number` — Specifies UIEvent.detail.

	`screenXArg:Number` — Specifies MouseEvent.screenX.

	`screenYArg:Number` — Specifies MouseEvent.screenY.

	`clientXArg:Number` — Specifies MouseEvent.clientX.

	`clientYArg:Number` — Specifies MouseEvent.clientY.

	`ctrlKeyArg:Boolean` — Specifies MouseEvent.ctrlKey.

	`altKeyArg:Boolean` — Specifies MouseEvent.altKey.

	`shiftKeyArg:Boolean` — Specifies MouseEvent.shiftKey.

	`metaKeyArg:Boolean` — Specifies MouseEvent.metaKey.

	`buttonArg:Number` — Specifies MouseEvent.button

	`relatedTargetArg:EventTarget` — Specifies MouseEvent.relatedTarget. This value may be null.

	`modifiersListArg:DOMString` — Refer to the KeyboardEvent.initKeyboardEventNS() method for a description of this parameter.

See also

W3C - MouseEvent.initMouseEventNS()

Constant Detail

HTML 4.01 click

Constant

public static const click:String = click

Introduced in:	HTML 4.01
Modified in:	DOM 2 Events

A pointing device button is clicked over an element.

The definition of a click depends on the environment configuration; i.e. it may depend on the screen location or the delay between the press and release of the pointing device button. In any case, the event target must be the same between the mousedown, mouseup, and click. The sequence of these events is: mousedown, mouseup, and click. It depends on the environment configuration whether the event type click can occur if one or more of the event types mouseover, mousemove, and mouseout occur between the press and release of the pointing device button. In addition, the event type is dispatched as described in Activation requests and behavior.

Title	Value
Namespace	`None`
Cancelable	Yes
Bubbles	Yes
Target	`Element`
Context info	MouseEvent.screenX, MouseEvent.screenY, MouseEvent.clientX, MouseEvent.clientY, MouseEvent.altKey, MouseEvent.ctrlKey, MouseEvent.shiftKey, MouseEvent.metaKey, MouseEvent.button, and UIEvent.view are in use. The UIEvent.detail attribute indicates the current click count. The attribute value is 1 when the user begins this action and increments by 1 for each click.

See also

W3C - MouseEvent.click

HTML 4.01 dblclick

Constant

public static const dblclick:String = dblclick

Introduced in:	HTML 4.01
Modified in:	DOM 2 Events

A pointing device button is clicked twice over an element.

The definition of a double click depends on the environment configuration, except that the event target must be the same between mousedown, mouseup, and dblclick. This event type is dispatched after the event type click if a click and double click occur simultaneously, and after the event type mouseup otherwise.

Title	Value
Namespace	`None`
Cancelable	Yes
Bubbles	Yes
Target	`Element`
Context info	MouseEvent.screenX, MouseEvent.screenY, MouseEvent.clientX, MouseEvent.clientY, MouseEvent.altKey, MouseEvent.ctrlKey, MouseEvent.shiftKey, MouseEvent.metaKey, MouseEvent.button, and UIEvent.view are in use. The UIEvent.detail attribute indicates the current click count.

See also

W3C - MouseEvent.dblclick

HTML 4.01 mousedown

Constant

public static const mousedown:String = mousedown

Introduced in:	HTML 4.01
Modified in:	DOM 2 Events

A pointing device button is pressed over an element.

Title	Value
Namespace	`None`
Cancelable	Yes
Bubbles	Yes
Target	`Element`
Context info	MouseEvent.screenX, MouseEvent.screenY, MouseEvent.clientX, MouseEvent.clientY, MouseEvent.altKey, MouseEvent.ctrlKey, MouseEvent.shiftKey, MouseEvent.metaKey, MouseEvent.button, and UIEvent.view are in use. The UIEvent.detail attribute indicates the current click count incremented by one. For example, if no click happened before the mousedown, UIEvent.detail will contain the value 1.

See also

W3C - MouseEvent.mousedown

HTML 4.01 mousemove

Constant

public static const mousemove:String = mousemove

Introduced in:	HTML 4.01
Modified in:	DOM 2 Events

A pointing device is moved while it is over an element.

Title	Value
Namespace	`None`
Cancelable	Yes
Bubbles	Yes
Target	`Element`
Context info	MouseEvent.screenX, MouseEvent.screenY, MouseEvent.clientX, MouseEvent.clientY, MouseEvent.altKey, MouseEvent.ctrlKey, MouseEvent.shiftKey, MouseEvent.metaKey, and UIEvent.view are in use.

See also

W3C - MouseEvent.mousemove

HTML 4.01 mouseout

Constant

public static const mouseout:String = mouseout

Introduced in:	HTML 4.01
Modified in:	DOM 2 Events

A pointing device is moved away from an element.

Title	Value
Namespace	`None`
Cancelable	Yes
Bubbles	Yes
Target	`Element`
Context info	MouseEvent.screenX, MouseEvent.screenY, MouseEvent.clientX, MouseEvent.clientY, MouseEvent.altKey, MouseEvent.ctrlKey, MouseEvent.shiftKey, MouseEvent.metaKey, and UIEvent.view are in use. MouseEvent.relatedTarget indicates the event target a pointing device is entering, if any.

See also

W3C - MouseEvent.mouseout

HTML 4.01 mouseover

Constant

public static const mouseover:String = mouseover

Introduced in:	HTML 4.01
Modified in:	DOM 2 Events

A pointing device is moved onto an element.

Title	Value
Namespace	`None`
Cancelable	Yes
Bubbles	Yes
Target	`Element`
Context info	MouseEvent.screenX, MouseEvent.screenY, MouseEvent.clientX, MouseEvent.clientY, MouseEvent.altKey, MouseEvent.ctrlKey, MouseEvent.shiftKey, MouseEvent.metaKey, and UIEvent.view are in use. MouseEvent.relatedTarget indicates the event target a pointing device is exiting, if any.

See also

W3C - MouseEvent.mouseover

HTML 4.01 mouseup

Constant

public static const mouseup:String = mouseup

Introduced in:	HTML 4.01
Modified in:	DOM 2 Events

A pointing device button is released over an element.

Title	Value
Namespace	`None`
Cancelable	Yes
Bubbles	Yes
Target	`Element`
Context info	MouseEvent.screenX, MouseEvent.screenY, MouseEvent.clientX, MouseEvent.clientY, MouseEvent.altKey, MouseEvent.ctrlKey, MouseEvent.shiftKey, MouseEvent.metaKey, MouseEvent.button, and UIEvent.view are in use. The UIEvent.detail attribute indicates the current click count incremented by one.

See also

W3C - MouseEvent.mouseup

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

DOM Reference Manual		All Packages \| All Classes \| Index \| Frames No Frames
MouseEvent	Properties \| Methods \| Constants

Package	dom.events
Class	public class MouseEvent
Inheritance	MouseEvent UIEvent Event Object
Implements	MouseEventView
Subclasses	MouseEvent, MouseMultiWheelEvent, MouseWheelEvent