MouseEvent

{{APIRef("Pointer 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.

Static properties

• {{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN_static", "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_static", "MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}} {{ReadOnlyInline}}
  • : Minimum force necessary for a force click.

Instance 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 or released (if applicable) when the mouse event was fired.
• {{domxref("MouseEvent.buttons")}} {{ReadOnlyInline}}
  • : The buttons being pressed (if any) when the mouse event was fired.
• {{domxref("MouseEvent.clientX")}} {{ReadOnlyInline}}
  • : The X coordinate of the mouse pointer in viewport coordinates.
• {{domxref("MouseEvent.clientY")}} {{ReadOnlyInline}}
  • : The Y coordinate of the mouse pointer in viewport coordinates.
• {{domxref("MouseEvent.ctrlKey")}} {{ReadOnlyInline}}
  • : Returns true if the <kbd>control</kbd> key was down when the mouse event was fired.
• {{domxref("MouseEvent.layerX")}} {{Non-standard_inline}} {{ReadOnlyInline}}
  • : Returns the horizontal coordinate of the event relative to the current layer.
• {{domxref("MouseEvent.layerY")}} {{Non-standard_inline}} {{ReadOnlyInline}}
  • : Returns the vertical coordinate of the event relative to the current layer.
• {{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 move event of the same type (a {{domxref("Element/mousemove_event", "mousemove")}}, {{domxref("Element/pointermove_event", "pointermove")}}, or {{domxref("Element/pointerrawupdate_event", "pointerrawupdate")}}).
• {{domxref("MouseEvent.movementY")}} {{ReadOnlyInline}}
  • : The Y coordinate of the mouse pointer relative to the position of the last move event of the same type (a {{domxref("Element/mousemove_event", "mousemove")}}, {{domxref("Element/pointermove_event", "pointermove")}}, or {{domxref("Element/pointerrawupdate_event", "pointerrawupdate")}}).
• {{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.relatedTarget")}} {{ReadOnlyInline}}
  • : The secondary target for the event, if there is one.
• {{domxref("MouseEvent.screenX")}} {{ReadOnlyInline}}
  • : The X coordinate of the mouse pointer in screen coordinates.
• {{domxref("MouseEvent.screenY")}} {{ReadOnlyInline}}
  • : The Y coordinate of the mouse pointer in screen coordinates.
• {{domxref("MouseEvent.shiftKey")}} {{ReadOnlyInline}}
  • : Returns true if the <kbd>shift</kbd> key was down when the mouse event was fired.
• {{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")}}.

Instance 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 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 {{domxref("EventTarget.dispatchEvent", "EventTarget.dispatchEvent()")}}.

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

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