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`, `DragEvent`, and `PointerEvent`.

Event

UIEvent

MouseEventConstructor
-----------

`MouseEvent()`

Creates a `MouseEvent` object.

Static properties
-----------------

`MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN` 
Non-standard
 Read only 

Minimum force necessary for a normal click.

`MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN` 
Non-standard
 Read only 

Minimum force necessary for a force click.

Instance 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 pressed (if any) when the mouse event was fired.

`MouseEvent.clientX` Read only 

The X coordinate of the mouse pointer in viewport coordinates.

`MouseEvent.clientY` Read only 

The Y coordinate of the mouse pointer in viewport coordinates.

`MouseEvent.ctrlKey` Read only 

Returns `true` if the `control` key was down when the mouse event was fired.

`MouseEvent.layerX` 
Non-standard
 Read only 

Returns the horizontal coordinate of the event relative to the current layer.

`MouseEvent.layerY` 
Non-standard
 Read only 

Returns the vertical coordinate of the event relative to the current layer.

`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.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 screen coordinates.

`MouseEvent.screenY` Read only 

The Y coordinate of the mouse pointer in screen coordinates.

`MouseEvent.shiftKey` Read only 

Returns `true` if the `shift` key was down when the mouse event was fired.

`MouseEvent.mozInputSource` 
Non-standard
 Read only 

 The type of device that generated the event (one of the `MOZ_SOURCE_*` constants).
 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` 
Non-standard
 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`.

Instance 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()` 
Deprecated

Initializes the value of a `MouseEvent` created. If the event has already been 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


```html
<p>
  <label><input type="checkbox" id="checkbox" /> Checked</label>
</p>
<p>
  <button id="button">Click me to send a MouseEvent to the checkbox</button>
</p>
```

### JavaScript


```js
function simulateClick() {
  // Get the element to send a click event
  const cb = document.getElementById("checkbox");

  // Create a synthetic click MouseEvent
  let evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window,
  });

  // Send the event to the checkbox element
  cb.dispatchEvent(evt);
}
document.getElementById("button").addEventListener("click", simulateClick);
```

### Result

Specifications
--------------

| Specification |
| --- |
| UI Events # interface-mouseevent |
| CSSOM View Module # extensions-to-the-mouseevent-interface |
| Pointer Lock 2.0 # extensions-to-the-mouseevent-interface |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

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