Web/API/MouseEvent

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.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="38.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Event</text></a><polyline points="76,25  86,20  86,30  76,25" stroke="#D4DDE4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/UIEvent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="153.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">UIEvent</text></a><polyline points="191,25  201,20  201,30  191,25" stroke="#D4DDE4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="281" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">MouseEvent</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

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). Instead of using this deprecated (and non-standard) property, you should instead use PointerEvent and look at its pressure property.
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 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 (programmatically generating a click event) on a checkbox using DOM methods. Event state (canceled or not) is then determined with the return value of method EventTarget.dispatchEvent().

HTML

<p><label><input type="checkbox" id="checkbox"> Checked</label>
<p><button id="button">Click me</button>

JavaScript

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

Result

Specifications

Specification	Status	Comment
CSS Object Model (CSSOM) View ModuleThe 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 LockThe 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 ModuleThe 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`.
UI EventsThe definition of 'MouseEvent' in that specification.	Working Draft
Document Object Model (DOM) Level 3 Events SpecificationThe 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 SpecificationThe definition of 'MouseEvent' in that specification.	Obsolete	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`MouseEvent`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 9	Opera Full support 10.6	Safari Full support 3.1	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 11	Safari iOS Full support 2	Samsung Internet Android Full support 1.0
`MouseEvent()` constructor	Chrome Full support 47	Edge Full support ≤79	Firefox Full support 11	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support 47	Chrome Android Full support 47	Firefox Android Full support 14	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support 5.0
`altKey`	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`button`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 9	Opera Full support 10.6	Safari Full support 3.1	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 11	Safari iOS Full support 2	Samsung Internet Android Full support 1.0
`buttons`	Chrome Full support 43	Edge Full support 12	Firefox Full support Yes Notes' Full support Yes Notes' Notes' Resrictions apply depending on OS.	IE Full support 9	Opera Full support Yes	Safari Full support 11.1	WebView Android No support No	Chrome Android No support No	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support 11.3	Samsung Internet Android No support No
`clientX`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 9	Opera Full support 10.6	Safari Full support 3.1	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 11	Safari iOS Full support 2	Samsung Internet Android Full support 1.0
`clientY`	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE Full support 9	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`ctrlKey`	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`getModifierState`	Chrome Full support 47	Edge Full support 12	Firefox Full support Yes	IE ?	Opera Full support Yes	Safari ?	WebView Android Full support 47	Chrome Android Full support 47	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS ?	Samsung Internet Android Full support 5.0
`initMouseEvent` Deprecated'Non-standard'	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE ?	Opera Full support Yes	Safari ?	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS ?	Samsung Internet Android Full support Yes
`metaKey`	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`movementX`	Chrome Full support 37 Full support 37 No support 22 — 37 Prefixed' Prefixed' Implemented with the vendor prefix: webkit	Edge Full support 13	Firefox Full support 41 Full support 41 No support 1 — 41 Prefixed' Prefixed' Implemented with the vendor prefix: moz	IE No support No	Opera Full support Yes	Safari Full support 9 Full support 9 No support 6 — 8 Prefixed' Prefixed' Implemented with the vendor prefix: webkit	WebView Android Full support 37 Full support 37 No support ? — 37 Prefixed' Prefixed' Implemented with the vendor prefix: webkit	Chrome Android Full support 37 Full support 37 No support ? — 37 Prefixed' Prefixed' Implemented with the vendor prefix: webkit	Firefox Android Full support 41 Full support 41 No support 4 — 41 Prefixed' Prefixed' Implemented with the vendor prefix: moz	Opera Android Full support Yes	Safari iOS Full support 8 Full support 8 No support 6 — 8 Prefixed' Prefixed' Implemented with the vendor prefix: webkit	Samsung Internet Android Full support 3.0 Full support 3.0 No support ? — 3.0 Prefixed' Prefixed' Implemented with the vendor prefix: webkit
`movementY`	Chrome Full support 37 Full support 37 No support 22 — 37 Prefixed' Prefixed' Implemented with the vendor prefix: webkit	Edge Full support 13	Firefox Full support 41 Full support 41 No support 1 — 41 Prefixed' Prefixed' Implemented with the vendor prefix: moz	IE No support No	Opera Full support Yes	Safari Full support 9 Full support 9 No support 6 — 8 Prefixed' Prefixed' Implemented with the vendor prefix: webkit	WebView Android Full support 37 Full support 37 No support ? — 37 Prefixed' Prefixed' Implemented with the vendor prefix: webkit	Chrome Android Full support 37 Full support 37 No support ? — 37 Prefixed' Prefixed' Implemented with the vendor prefix: webkit	Firefox Android Full support 41 Full support 41 No support 4 — 41 Prefixed' Prefixed' Implemented with the vendor prefix: moz	Opera Android Full support Yes	Safari iOS Full support 8 Full support 8 No support 6 — 8 Prefixed' Prefixed' Implemented with the vendor prefix: webkit	Samsung Internet Android Full support 3.0 Full support 3.0 No support ? — 3.0 Prefixed' Prefixed' Implemented with the vendor prefix: webkit
`offsetX` Experimental'	Chrome Full support Yes	Edge Full support 12	Firefox Full support 39	IE Full support 9	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 43	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`offsetY` Experimental'	Chrome Full support Yes	Edge Full support 12	Firefox Full support 39	IE Full support 9	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 43	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`pageX` Experimental'	Chrome Full support 45	Edge Full support 12	Firefox Full support Yes	IE Full support 9	Opera Full support Yes	Safari Full support Yes	WebView Android Full support 45	Chrome Android Full support 45	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support 5.0
`pageY` Experimental'	Chrome Full support 45	Edge Full support 12	Firefox Full support Yes	IE Full support 9	Opera Full support Yes	Safari Full support Yes	WebView Android Full support 45	Chrome Android Full support 45	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support 5.0
`region`	Chrome 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 Full support ≤79 Disabled' Full support ≤79 Disabled' Disabled' From version ≤79: this feature is behind the `Experimental Web Platform Features` preference (needs to be set to `true`).	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 No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	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 No	Safari iOS No support No	Samsung Internet Android No support No
`relatedTarget`	Chrome Full support Yes	Edge Full support 12	Firefox Full support 48	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`screenX`	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE Full support 9	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`screenY`	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE Full support 9	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`shiftKey`	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`which` Non-standard'	Chrome Full support 1	Edge Full support 12	Firefox Full support 1 Notes' Full support 1 Notes' Notes' On `mousemove` events, the `which` property is incorrectly always set to `1`.	IE Full support 9	Opera Full support 10.6	Safari Full support 3.1	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox 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 11	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`x` Experimental'	Chrome Full support Yes	Edge Full support 12	Firefox Full support 53	IE Full support 9	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 53	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`y` Experimental'	Chrome Full support Yes	Edge Full support 12	Firefox Full support 53	IE Full support 9	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 53	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

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.