MouseEvent - Web APIs

MouseEvent - Web APIs | MDN

Constructor

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 or released (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 move event of the same type (a mousemove, pointermove, or pointerrawupdate).
MouseEvent.movementY Read only: The Y coordinate of the mouse pointer relative to the position of the last move event of the same type (a mousemove, pointermove, or pointerrawupdate).
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.

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

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