Table of Contents

Class MouseEvent

Namespace
CSharpToJavaScript.APIs.JS
Assembly
CSharpToJavaScript.dll

The MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse).
Common events using this interface include Elementclick, Elementdblclick, Elementmouseup, Elementmousedown.

[Value("MouseEvent")]
public class MouseEvent : UIEvent
Inheritance
MouseEvent
Derived
Inherited Members

Remarks

MouseEvent derives from UIEvent, which in turn derives from Event.
Though the InitMouseEvent(string, bool, bool, Window?, long, long, long, long, long, bool, bool, bool, bool, Number, EventTarget?) method is kept for backward compatibility, creating of a MouseEvent object should be done using the MouseEvent(string, MouseEventInit) constructor.

Several more specific events are based on MouseEvent, including WheelEvent, DragEvent, and PointerEvent.

-Its direct parent, UIEvent
-PointerEvent: For advanced pointer events, including multi-touch

See also on MDN

Constructors

MouseEvent() 

public MouseEvent()

MouseEvent(string, MouseEventInit)

The MouseEvent() constructor creates a new MouseEvent object.

public MouseEvent(string type, MouseEventInit eventInitDict = null)

Parameters

type string
eventInitDict MouseEventInit

Remarks

-MouseEvent, the interface of the objects it constructs.

See also on MDN

Properties

AltKey

The MouseEvent.altKey read-only property is a boolean value that indicates whether the <kbd>alt</kbd> key was pressed or not when a given mouse event occurs.

[Value("altKey")]
public bool AltKey { get; }

Property Value

bool

A boolean value, where true indicates that the key is pressed, and false indicates that the key is not pressed.

Remarks

Be aware that the browser can't always detect the <kbd>alt</kbd> key on some operating systems.
On some Linux variants, for example, a left mouse click combined with the <kbd>alt</kbd> key is used to move or resize windows.

NOTE

On Macintosh keyboards, this key is also known as the <kbd>option</kbd> key.

-MouseEvent

See also on MDN

Button

The MouseEvent.button read-only property indicates which button was pressed or released on the mouse to trigger the event.

[Value("button")]
public Number Button { get; }

Property Value

Number

A number representing a given button:As noted above, buttons may be configured differently to the standard "left to right" layout.
A mouse configured for left-handed use may have the button actions reversed.
Some pointing devices only have one button and use keyboard or other input mechanisms to indicate main, secondary, auxiliary, etc.
Others may have many buttons mapped to different functions and button values.

Remarks

This property only guarantees to indicate which buttons are pressed or released during events caused by pressing or releasing one or multiple buttons.
As such, it is not reliable for events such as Elementmouseenter, Elementmouseleave, Elementmouseover, Elementmouseout, or Elementmousemove.

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.

NOTE

Do not confuse this property with the Buttons property, which indicates which buttons are pressed for all mouse events types.

-MouseEvent

See also on MDN

Buttons

The MouseEvent.buttons read-only property indicates which buttons are pressed on the mouse (or other input device) when a mouse event is triggered.

[Value("buttons")]
public ushort Buttons { get; }

Property Value

ushort

A number representing one or more buttons.
For more than one button pressed simultaneously, the values are combined (e.g., 3 is primary + secondary).

Remarks

Each button that can be pressed is represented by a given number (see below).
If more than one button is pressed, the button values are added together to produce a new number.
For example, if the secondary (2) and auxiliary (4) buttons are pressed simultaneously, the value is 6 (i.e., 2 + 4).

NOTE

Do not confuse this property with the Button property.
The MouseEvent.buttons property indicates the state of buttons pressed during any kind of mouse event,
while the Button property only guarantees the correct value for mouse events caused by pressing or releasing one or multiple buttons.

-MouseEvent

See also on MDN

ClientX

The clientX read-only property of the MouseEvent interface provides the horizontal coordinate within the application's {{glossary("viewport")}} at which the event occurred (as opposed to the coordinate within the page).

[Value("clientX")]
public long ClientX { get; }

Property Value

long

A double floating point value in pixels.

Remarks

For example, clicking on the left edge of the viewport will always result in a mouse event with a clientX value of 0, regardless of whether the page is scrolled horizontally.

-MouseEvent
-ClientY
-ScreenX / ScreenY
-Coordinate systems

See also on MDN

ClientY

The clientY read-only property of the MouseEvent interface provides the vertical coordinate within the application's {{glossary("viewport")}} at which the event occurred (as opposed to the coordinate within the page).

[Value("clientY")]
public long ClientY { get; }

Property Value

long

A double floating point value in pixels.

Remarks

For example, clicking on the top edge of the viewport will always result in a mouse event with a clientY value of 0, regardless of whether the page is scrolled vertically.

-MouseEvent
-ClientX
-ScreenX / ScreenY
-Coordinate systems

See also on MDN

CtrlKey

The MouseEvent.ctrlKey read-only property is a boolean value that indicates whether the <kbd>ctrl</kbd> key was pressed or not when a given mouse event occurs.

[Value("ctrlKey")]
public bool CtrlKey { get; }

Property Value

bool

A boolean value, where true indicates that the key is pressed, and false indicates that the key is not pressed.

Remarks

On Macintosh keyboards, this key is labeled the <kbd>control</kbd> key. Also, note that on a Mac, a click combined with the <kbd>control</kbd> key is intercepted by the operating system and used to open a context menu, so ctrlKey is not detectable on click events.

Pinch-zooming using a trackpad also sends a simulated Elementwheel event with ctrlKey set to true.

-MouseEvent

See also on MDN

LayerX

CAUTION
Non-standard
The MouseEvent.layerX read-only property returns the
horizontal coordinate of the event relative to the current layer. 
[Value("layerX")]
public long LayerX { get; }

Property Value

long

An integer value in pixels for the x-coordinate of the mouse pointer, when the mouse event fired.

Remarks

This property takes scrolling of the page into account and returns a value relative to
the whole of the document unless the event occurs inside a positioned element, where the
returned value is relative to the top left of the positioned element.

See also on MDN

LayerY

CAUTION
Non-standard
The MouseEvent.layerY read-only property returns the
vertical coordinate of the event relative to the current layer. 
[Value("layerY")]
public long LayerY { get; }

Property Value

long

An integer value in pixels for the y-coordinate of the mouse pointer, when the mouse event fired.

Remarks

This property takes scrolling of the page into account, and returns a value relative to
the whole of the document, unless the event occurs inside a positioned element, where
the returned value is relative to the top left of the positioned element.

See also on MDN

MetaKey

The MouseEvent.metaKey read-only property is a boolean value that indicates whether the <kbd>meta</kbd> key was pressed or not when a given mouse event occurs.

[Value("metaKey")]
public bool MetaKey { get; }

Property Value

bool

A boolean value, where true indicates that the key is pressed, and false indicates that the key is not pressed.

Remarks

Be aware that many operating systems bind special functionality to the <kbd>meta</kbd> key, so this property may be false even when the key is actually pressed.
On Windows, for example, this key may open the Start menu.

NOTE

On Macintosh keyboards, this key is the <kbd>command</kbd> key (<kbd>⌘</kbd>).
On Windows keyboards, this key is the Windows key (<kbd>⊞</kbd>).

-MouseEvent

See also on MDN

MovementX

The movementX read-only property of the MouseEvent interface provides the difference in the X coordinate of the mouse pointer between the given event and the previous Elementmousemove event.
In other words, the value of the property is computed like this: currentEvent.movementX = currentEvent.screenX - previousEvent.screenX.

[Value("movementX")]
public Number MovementX { get; }

Property Value

Number

A number. Always zero on any MouseEvent other than mousemove.

Remarks

WARNING

Browsers use different units for movementX and screenX than what the specification defines. Depending on the browser and operating system, the movementX units may be a physical pixel, a logical pixel, or a CSS pixel. You may want to avoid the movement properties, and instead calculate the delta between the current client values (ScreenX, ScreenY) and the previous client values.

-MovementY
-MouseEvent
-Pointer Lock

See also on MDN

MovementY

The movementY read-only property of the MouseEvent interface provides the difference in the Y coordinate of the mouse pointer between the given event and the previous Elementmousemove event.
In other words, the value of the property is computed like this: currentEvent.movementY = currentEvent.screenY - previousEvent.screenY.

[Value("movementY")]
public Number MovementY { get; }

Property Value

Number

A number. Always zero on any MouseEvent other than mousemove.

Remarks

WARNING

Browsers use different units for movementY and screenY than what the specification defines. Depending on the browser and operating system, the movementY units may be a physical pixel, a logical pixel, or a CSS pixel. You may want to avoid the movement properties, and instead calculate the delta between the current client values (ScreenX, ScreenY) and the previous client values.

-MovementX
-MouseEvent
-Pointer Lock

See also on MDN

OffsetX

The offsetX read-only property of the MouseEvent interface provides the offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node.

[Value("offsetX")]
public Number OffsetX { get; }

Property Value

Number

A double floating point value in pixels.Early versions of the spec defined this as an integer.

Remarks

-MouseEvent
-Coordinate systems

See also on MDN

OffsetY

The offsetY read-only property of the MouseEvent interface provides the offset in the Y coordinate of the mouse pointer between that event and the padding edge of the target node.

[Value("offsetY")]
public Number OffsetY { get; }

Property Value

Number

A double floating point value in pixels.Early versions of the spec defined this as an integer.

Remarks

-MouseEvent
-Coordinate systems

See also on MDN

PageX

The pageX read-only property of the MouseEvent interface returns the X (horizontal) coordinate (in pixels) at which the mouse was clicked, relative to the left edge of the entire document.
This includes any portion of the document not currently visible.

[Value("pageX")]
public Number PageX { get; }

Property Value

Number

A double floating-point number of pixels from the left edge of the document at which the mouse was clicked, regardless of any scrolling or viewport positioning that may be in effect.This property was originally specified in the Touch Events specification as a long integer, but was redefined in the CSSOM View Module to be a double-precision
floating-point number to allow for subpixel precision.
Even though numeric types both are represented by Number in JavaScript, they may be handled differently internally in the browser's code, resulting in potential behavior differences.See Browser compatibility to learn which browsers have been updated to use the revised data type.

Remarks

Being based on the edge of the document as it is, this property takes into account any horizontal scrolling of the page.
For example, if the page is scrolled such that 200 pixels of the left side of the document are scrolled out of view, and the mouse is clicked 100 pixels inward from the left edge of the view, the value returned by pageX will be 300.

Originally, this property was defined as a long integer. The CSSOM View Module redefined it as a
double float. See the Browser compatibility section for
details.

See Coordinate systems for additional information about coordinates specified in this fashion.

-PageY
-Coordinate systems

See also on MDN

PageY

The pageY read-only property of the MouseEvent interface returns the Y (vertical) coordinate (in pixels) at which the mouse was clicked, relative to the top edge of the entire document.
This includes any portion of the document not currently visible.

[Value("pageY")]
public Number PageY { get; }

Property Value

Number

A double floating point value in pixels.

Remarks

See PageX for more information.

-PageX
-Coordinate systems

See also on MDN

RelatedTarget

The MouseEvent.relatedTarget read-only property is the secondary target for the mouse event, if there is one.

[Value("relatedTarget")]
public EventTarget? RelatedTarget { get; }

Property Value

EventTarget

An EventTarget object or null.

Remarks

That is:

For events with no secondary target, relatedTarget returns
null.

RelatedTarget is a similar property for focus events.

-MouseEvent

See also on MDN

ScreenX

The screenX read-only property of the MouseEvent interface provides the horizontal coordinate (offset) of the mouse pointer in screen coordinates.

[Value("screenX")]
public long ScreenX { get; }

Property Value

long

A double floating point value in pixels.Early versions of the spec defined this as an integer referring to the number of pixels.

Remarks

NOTE

In a multiscreen environment, screens aligned horizontally will be treated as a single device, and so the range of the screenX value will increase to the combined width of the screens.

-MouseEvent
-ScreenY
-ClientX / ClientY
-Coordinate systems

See also on MDN

ScreenY

The screenY read-only property of the MouseEvent interface provides the vertical coordinate (offset) of the mouse pointer in screen coordinates.

[Value("screenY")]
public long ScreenY { get; }

Property Value

long

A double floating point value in pixels.Early versions of the spec defined this as an integer referring to the number of pixels.

Remarks

-MouseEvent
-ScreenX
-ClientX / ClientY
-Coordinate systems

See also on MDN

ShiftKey

The MouseEvent.shiftKey read-only property is a boolean value that indicates whether the <kbd>shift</kbd> key was pressed or not when a given mouse event occurs.

[Value("shiftKey")]
public bool ShiftKey { get; }

Property Value

bool

A boolean value, where true indicates that the key is pressed, and false indicates that the key is not pressed.

Remarks

-MouseEvent

See also on MDN

X

The MouseEvent.x property is an alias for the ClientX property.

[Value("x")]
public Number X { get; }

Property Value

Number

Remarks

See also on MDN

Y

The MouseEvent.y property is an alias for the ClientY property.

[Value("y")]
public Number Y { get; }

Property Value

Number

Remarks

See also on MDN

Methods

GetModifierState(string)

The MouseEvent.getModifierState() method returns the current state of the specified modifier key: true if the modifier is active (i.e., the modifier key is pressed or locked), otherwise, false.

[Value("getModifierState")]
public bool GetModifierState(string keyArg)

Parameters

keyArg string

Returns

bool

A boolean value.

Remarks

See GetModifierState(string) for details.

-The MouseEvent this method belongs to.
-GetModifierState(string)

See also on MDN

InitMouseEvent(string, bool, bool, Window?, long, long, long, long, long, bool, bool, bool, bool, Number, EventTarget?)

IMPORTANT
Deprecated
The MouseEvent.initMouseEvent() method initializes the
value of a mouse event once it's been created (normally using the CreateEvent(string) method). 
[Value("initMouseEvent")]
public GlobalObject.Undefined InitMouseEvent(string typeArg, bool bubblesArg = false, bool cancelableArg = false, Window? viewArg = null, long detailArg = 0, long screenXArg = 0, long screenYArg = 0, long clientXArg = 0, long clientYArg = 0, bool ctrlKeyArg = false, bool altKeyArg = false, bool shiftKeyArg = false, bool metaKeyArg = false, Number buttonArg = null, EventTarget? relatedTargetArg = null)

Parameters

typeArg string
bubblesArg bool
cancelableArg bool
viewArg Window
detailArg long
screenXArg long
screenYArg long
clientXArg long
clientYArg long
ctrlKeyArg bool
altKeyArg bool
shiftKeyArg bool
metaKeyArg bool
buttonArg Number
relatedTargetArg EventTarget

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

WARNING

Do not use this method anymore as it is deprecated.

Instead use specific event constructors, like MouseEvent(string, MouseEventInit).
The section on Creating and dispatching events gives more information about the way to use these.

Events initialized in this way must have been created with the CreateEvent(string) method.
This method must be called to set the event
before it is dispatched, using DispatchEvent(Event).

-MouseEvent(string, MouseEventInit) constructor, the modern
standard way of creating a MouseEvent
-InitEvent(string, bool, bool) is a simpler method serving a similar purpose. It
is also obsolete and shouldn't be used any more.

See also on MDN

Edit this page