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 (en-US), mouseup (en-US), 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() (en-US) constructor.

Several more specific events derivate from MouseEvent: WheelEvent and DragEvent.

Constructor

MouseEvent() (en-US)
Creates a MouseEvent object.

Properties

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

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

The buttons being pressed when the mouse event was fired

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

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

MouseEvent.screenX (en-US) Read only
The X coordinate of the mouse pointer in global (screen) coordinates.
MouseEvent.screenY (en-US) 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 (en-US) 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 (en-US) 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). The possible values are:

Constant name Value Desription
MouseEvent.MOZ_SOURCE_UNKNOWN 0 The input device is unknown.
MouseEvent.MOZ_SOURCE_MOUSE 1 The event was generated by a mouse (or mouse-like device).
MouseEvent.MOZ_SOURCE_PEN 2 The event was generated by a pen on a tablet.
MouseEvent.MOZ_SOURCE_ERASER 3 The event was generated by an eraser on a tablet.
MouseEvent.MOZ_SOURCE_CURSOR 4 The event was generated by a cursor.
MouseEvent.MOZ_SOURCE_TOUCH 5 The event was generated on a touch interface.
MouseEvent.MOZ_SOURCE_KEYBOARD 6 The event was generated by a keyboard.

Methods

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

MouseEvent.getModifierState() (en-US)
Returns the current state of the specified modifier key. See the KeyboardEvent.getModifierState (en-US)() 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
HTML Living Standard
La definición de 'MouseEvent.region' en esta especificación.
Living Standard From Document Object Model (DOM) Level 3 Events Specification, added the region property.
Pointer Lock
La definición de 'MouseEvent' en esta especificación.
Candidate Recommendation From Document Object Model (DOM) Level 3 Events Specification, added movementX and movementY properties.
Document Object Model (DOM) Level 3 Events Specification
La definición de 'MouseEvent' en esta especificación.
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
La definición de 'MouseEvent' en esta especificación.
Obsolete Initial definition.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
movementX (en-US)
movementY (en-US)
(Yes) moz (en-US) (Yes) webkit (en-US) ? ? ?
buttons (en-US) (Yes) Sin soporte ? ? ?
which (en-US) 1.0 1.0 9.0 5.0 1.0
getModifierState() (en-US) 15 (15) (Yes) (Yes) (Yes) (Yes)
mozPressure and mozInputSource (en-US) 4.0 (2) Sin soporte Sin soporte Sin soporte Sin soporte
MouseEvent() (en-US) 11 (11) (Yes) ? (Yes) ?
MouseEvent.region (en-US) 32 (32) ? ? ? ?
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

See also