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 click, dblclick, mouseup, mousedown.

MouseEvent derives from UIEvent, which in turn derives from Event. Though the MouseEvent.initMouseEvent() method is kept for backward compatibility, creating of a MouseEvent object should be done using the MouseEvent() constructor.

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

Constructor

MouseEvent()
Creates a MouseEvent object.

Properties

This interface also inherits properties of its parents, UIEvent and Event.

MouseEvent.altKey Read only
Returns true if the alt key was down when the mouse event was fired.
MouseEvent.button Read only
The button number that was pressed (if applicable) when the mouse event was fired.
MouseEvent.buttons Read only

The buttons being depressed (if any) when the mouse event was fired.

MouseEvent.clientX Read only
The X coordinate of the mouse pointer in local (DOM content) coordinates.
MouseEvent.clientY Read only
The Y coordinate of the mouse pointer in local (DOM content) coordinates.
MouseEvent.ctrlKey Read only
Returns true if the control key was down when the mouse event was fired.
MouseEvent.metaKey Read only
Returns true if the meta key was down when the mouse event was fired.
MouseEvent.movementX Read only
The X coordinate of the mouse pointer relative to the position of the last mousemove event.
MouseEvent.movementY Read only
The Y coordinate of the mouse pointer relative to the position of the last mousemove event.
MouseEvent.offsetX Read only
The X coordinate of the mouse pointer relative to the position of the padding edge of the target node.
MouseEvent.offsetY Read only
The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node.
MouseEvent.pageX Read only
The X coordinate of the mouse pointer relative to the whole document.
MouseEvent.pageY Read only
The Y coordinate of the mouse pointer relative to the whole document.
MouseEvent.region Read only
Returns the id of the hit region affected by the event. If no hit region is affected, null is returned.
MouseEvent.relatedTarget Read only

The secondary target for the event, if there is one.

MouseEvent.screenX Read only
The X coordinate of the mouse pointer in global (screen) coordinates.
MouseEvent.screenY Read only
The Y coordinate of the mouse pointer in global (screen) coordinates.
MouseEvent.shiftKey Read only
Returns true if the shift key was down when the mouse event was fired.
MouseEvent.which Read only
The button being pressed when the mouse event was fired.
MouseEvent.mozPressure Read only
The amount of pressure applied to a touch or tablet device when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
MouseEvent.mozInputSource Read only

The type of device that generated the event (one of the MOZ_SOURCE_* constants listed below). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event).

MouseEvent.webkitForce Read only
The amount of pressure applied when clicking
MouseEvent.x Read only
Alias for MouseEvent.clientX.
MouseEvent.y Read only
Alias for MouseEvent.clientY

Constants

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN Read only
Minimum force necessary for a normal click
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN Read only
Minimum force necessary for a force click

Methods

This interface also inherits methods of its parents, UIEvent and Event.

MouseEvent.getModifierState()
Returns the current state of the specified modifier key. See the KeyboardEvent.getModifierState() for details.
MouseEvent.initMouseEvent()
Initializes the value of a MouseEvent created. If the event has already being dispatched, this method does nothing.

Example

This example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using DOM methods. 

function simulateClick() {
  var evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window
  });
  var cb = document.getElementById("checkbox"); //element to click on
  var canceled = !cb.dispatchEvent(evt);
  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}
document.getElementById("button").addEventListener('click', simulateClick);
<p><label><input type="checkbox" id="checkbox"> Checked</label>
<p><button id="button">Click me</button>

Click on the button to see how the sample works:

Specifications

Specification Status Comment
CSS Object Model (CSSOM) View Module
The definition of 'MouseEvent' in that specification.
Working Draft Redefines MouseEvent from long to double. This means that a PointerEvent whose pointerType is mouse will be a double.
Pointer Lock
The definition of 'MouseEvent' in that specification.
Candidate Recommendation From Document Object Model (DOM) Level 3 Events Specification, added movementX and movementY properties.
CSS Object Model (CSSOM) View Module
The definition of 'MouseEvent' in that specification.
Working Draft From Document Object Model (DOM) Level 3 Events Specification, added offsetX and offsetY, pageX and pageY, x, and y properties. Redefined screen, page, client and coordinate (x and y) properties as double from long.
Document Object Model (DOM) Level 3 Events Specification
The definition of 'MouseEvent' in that specification.
Obsolete From Document Object Model (DOM) Level 2 Events Specification, added the MouseEvent() constructor, the getModifierState() method and the buttons property.
Document Object Model (DOM) Level 2 Events Specification
The definition of 'MouseEvent' in that specification.
Obsolete Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
MouseEvent() constructorChrome Full support 47Edge ? Firefox Full support 11IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support 47Chrome Android Full support 47Edge Mobile ? Firefox Android Full support 14Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
altKeyChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
buttonChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support 9
Full support 9
Full support Yes
Notes
Notes Different convention used prior to version 9.
Opera Full support YesSafari Full support 3.1WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
buttonsChrome Full support 43Edge Full support YesFirefox Full support Yes
Notes
Full support Yes
Notes
Notes Resrictions apply depending on OS.
IE Full support 9Opera Full support YesSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS No support NoSamsung Internet Android ?
clientXChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support 6Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
clientYChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support 6Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
ctrlKeyChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
getModifierStateChrome Full support 47Edge Full support YesFirefox ? IE ? Opera ? Safari ? WebView Android Full support 47Chrome Android Full support 47Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
initMouseEvent
DeprecatedNon-standard
Chrome Full support YesEdge Full support YesFirefox Full support YesIE ? Opera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android ?
metaKeyChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
movementXChrome Full support 37
Full support 37
No support 22 — 37
Prefixed
Prefixed Requires the vendor prefix: webkit
Edge Full support YesFirefox Full support 41
Full support 41
No support 1 — 41
Prefixed
Prefixed Requires the vendor prefix: moz
IE No support NoOpera ? Safari No support NoWebView Android Full support 37Chrome Android Full support 37
Full support 37
No support ? — 37
Prefixed
Prefixed Requires the vendor prefix: webkit
Edge Mobile Full support YesFirefox Android Full support 41
Full support 41
No support 4 — 41
Prefixed
Prefixed Requires the vendor prefix: moz
Opera Android ? Safari iOS No support NoSamsung Internet Android ?
movementYChrome Full support 37
Full support 37
No support 22 — 37
Prefixed
Prefixed Requires the vendor prefix: webkit
Edge Full support YesFirefox Full support 41
Full support 41
No support 1 — 41
Prefixed
Prefixed Requires the vendor prefix: moz
IE No support NoOpera ? Safari No support NoWebView Android Full support 37Chrome Android Full support 37
Full support 37
No support ? — 37
Prefixed
Prefixed Requires the vendor prefix: webkit
Edge Mobile Full support YesFirefox Android Full support 41
Full support 41
No support 4 — 41
Prefixed
Prefixed Requires the vendor prefix: moz
Opera Android ? Safari iOS No support NoSamsung Internet Android ?
offsetX
Experimental
Chrome Full support YesEdge Full support YesFirefox Full support 39IE Full support 6Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 43Opera Android ? Safari iOS ? Samsung Internet Android ?
offsetY
Experimental
Chrome Full support YesEdge Full support YesFirefox Full support 39IE Full support 6Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 43Opera Android ? Safari iOS ? Samsung Internet Android ?
pageX
Experimental
Chrome Full support 45Edge Full support YesFirefox Full support YesIE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support 45Chrome Android Full support 45Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
pageY
Experimental
Chrome Full support 45Edge Full support YesFirefox Full support YesIE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support 45Chrome Android Full support 45Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
regionChrome Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Edge ? Firefox Full support 30
Disabled
Full support 30
Disabled
Disabled From version 30: this feature is behind the canvas.hitregions.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile ? Firefox Android Full support 30
Disabled
Full support 30
Disabled
Disabled From version 30: this feature is behind the canvas.hitregions.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android ?
relatedTargetChrome Full support YesEdge Full support YesFirefox Full support 48IE Full support YesOpera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
screenXChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support 6Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
screenYChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support 6Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
shiftKeyChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
which
Non-standard
Chrome Full support 1Edge Full support YesFirefox Full support 1
Notes
Full support 1
Notes
Notes On mousemove events, the which property is incorrectly always set to 1.
IE Full support 9Opera Full support 5Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4
Notes
Full support 4
Notes
Notes On mousemove events, the which property is incorrectly always set to 1.
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
x
Experimental
Chrome Full support YesEdge Full support YesFirefox Full support 53IE Full support 6Opera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 53Opera Android ? Safari iOS ? Samsung Internet Android ?
y
Experimental
Chrome Full support YesEdge Full support YesFirefox Full support 53IE Full support 6Opera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 53Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also