---
title: MouseEvent
slug: Web/API/MouseEvent
tags:
  - API
  - DOM
  - DOM Events
  - Interface
  - MouseEvent
  - Reference
  - events
  - mouse
browser-compat: api.MouseEvent
---
{{APIRef("DOM Events")}}

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 {{domxref("Element/click_event", "click")}}, {{domxref("Element/dblclick_event", "dblclick")}}, {{domxref("Element/mouseup_event", "mouseup")}}, {{domxref("Element/mousedown_event", "mousedown")}}.

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

Several more specific events are based on `MouseEvent`, including {{domxref("WheelEvent")}}, {{domxref("DragEvent")}}, and {{domxref("PointerEvent")}}.

{{InheritanceDiagram}}

## Constructor

- {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}
  - : Creates a `MouseEvent` object.

## Properties

_This interface also inherits properties of its parents, {{domxref("UIEvent")}} and {{domxref("Event")}}._

- {{domxref("MouseEvent.altKey")}} {{readonlyinline}}
  - : Returns `true` if the <kbd>alt</kbd> key was down when the mouse event was fired.
- {{domxref("MouseEvent.button")}} {{readonlyinline}}
  - : The button number that was pressed (if applicable) when the mouse event was fired.
- {{domxref("MouseEvent.buttons")}} {{readonlyinline}}
  - : The buttons being depressed (if any) when the mouse event was fired.
- {{domxref("MouseEvent.clientX")}} {{readonlyinline}}
  - : The X coordinate of the mouse pointer in local (DOM content) coordinates.
- {{domxref("MouseEvent.clientY")}} {{readonlyinline}}
  - : The Y coordinate of the mouse pointer in local (DOM content) coordinates.
- {{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}
  - : Returns `true` if the <kbd>control</kbd> key was down when the mouse event was fired.
- {{domxref("MouseEvent.metaKey")}} {{readonlyinline}}
  - : Returns `true` if the <kbd>meta</kbd> key was down when the mouse event was fired.
- {{domxref("MouseEvent.movementX")}} {{readonlyinline}}
  - : The X coordinate of the mouse pointer relative to the position of the last {{domxref("Element/mousemove_event", "mousemove")}} event.
- {{domxref("MouseEvent.movementY")}} {{readonlyinline}}
  - : The Y coordinate of the mouse pointer relative to the position of the last {{domxref("Element/mousemove_event", "mousemove")}} event.
- {{domxref("MouseEvent.offsetX")}} {{readonlyinline}}
  - : The X coordinate of the mouse pointer relative to the position of the padding edge of the target node.
- {{domxref("MouseEvent.offsetY")}} {{readonlyinline}}
  - : The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node.
- {{domxref("MouseEvent.pageX")}} {{readonlyinline}}
  - : The X coordinate of the mouse pointer relative to the whole document.
- {{domxref("MouseEvent.pageY")}} {{readonlyinline}}
  - : The Y coordinate of the mouse pointer relative to the whole document.
- {{domxref("MouseEvent.region")}} {{readonlyinline}}
  - : Returns the id of the hit region affected by the event. If no hit region is affected, `null` is returned.
- {{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}
  - : The secondary target for the event, if there is one.
- {{domxref("MouseEvent.screenX")}} {{readonlyinline}}
  - : The X coordinate of the mouse pointer in global (screen) coordinates.
- {{domxref("MouseEvent.screenY")}} {{readonlyinline}}
  - : The Y coordinate of the mouse pointer in global (screen) coordinates.
- {{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}
  - : Returns `true` if the <kbd>shift</kbd> key was down when the mouse event was fired.
- {{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{deprecated_inline}} {{readonlyinline}}
  - : 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 use {{domxref("PointerEvent")}} and look at its {{domxref("PointerEvent.pressure", "pressure")}} property.
- {{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}}
  - : 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).
- {{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}
  - : The amount of pressure applied when clicking
- {{domxref("MouseEvent.x")}} {{readonlyinline}}
  - : Alias for {{domxref("MouseEvent.clientX")}}.
- {{domxref("MouseEvent.y")}} {{readonlyinline}}
  - : Alias for {{domxref("MouseEvent.clientY")}}

## Constants

- {{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
  - : Minimum force necessary for a normal click
- {{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
  - : Minimum force necessary for a force click

## Methods

_This interface also inherits methods of its parents, {{domxref("UIEvent")}} and {{domxref("Event")}}._

- {{domxref("MouseEvent.getModifierState()")}}
  - : Returns the current state of the specified modifier key. See {{domxref("KeyboardEvent.getModifierState", "KeyboardEvent.getModifierState()")}} for details.
- {{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}
  - : 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 {{domxref("EventTarget.dispatchEvent", "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

{{EmbedLiveSample('Example')}}

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- Its direct parent, {{domxref("UIEvent")}}.
- {{domxref("PointerEvent")}}: For advanced pointer events, including multi-touch
