MouseEvent()

The MouseEvent() constructor creates a new MouseEvent.

Syntax

 event = new MouseEvent(typeArg, mouseEventInit);

Values

typeArg
Is a DOMString representing the name of the event.
mouseEventInit Optional
Is a MouseEventInit dictionary, having the following fields:
  • "screenX", optional and defaulting to 0, of type long, that is the horizontal position of the mouse event on the user's screen; setting this value doesn't move the mouse pointer.
  • "screenY", optional and defaulting to 0, of type long, that is the vertical position of the mouse event on the user's screen; setting this value doesn't move the mouse pointer.
  • "clientX", optional and defaulting to 0, of type long, that is the horizontal position of the mouse event on the client window of user's screen; setting this value doesn't move the mouse pointer.
  • "clientY", optional and defaulting to 0, of type long, that is the vertical position of the mouse event on the client window of the user's screen; setting this value doesn't move the mouse pointer.
  • "ctrlKey", optional and defaulting to false, of type Boolean, that indicates if the ctrl key was simultaneously pressed.
  • "shiftKey", optional and defaulting to false, of type Boolean, that indicates if the shift key was simultaneously pressed.
  • "altKey", optional and defaulting to false, of type Boolean, that indicates if the alt key was simultaneously pressed.
  • "metaKey", optional and defaulting to false, of type Boolean, that indicates if the meta key was simultaneously pressed.
  • "button", optional and defaulting to 0, of type short, that describes which button is pressed during events related to the press or release of a button:
    Value Meaning
    0 Main button pressed (usually the left button) or un-initialized
    1 Auxiliary button pressed (usually the middle button)
    2 Secondary button pressed (usually the right button)
  • "buttons", optional and defaulting to 0, of type unsigned short, that describes which buttons are pressed when the event is launched:
    Bit-field value Meaning
    0 No button pressed
    1 Main button pressed (usually the left button)
    2 Secondary button pressed (usually the right button)
    4 Auxiliary button pressed (usually the middle button)
  • "relatedTarget", optional and defaulting to null, of type EventTarget, that is the element just left (in case of  a mouseenter or mouseover) or is entering (in case of a mouseout or mouseleave).
  • "region", optional and defaulting to null, of type DOMString, is the id of the hit region affected by the event. The absence of any hit region is affected, is represented by the null value.

In some implementations, passing anything other than a number for the screen and client fields will throw a TypeError.

The MouseEventInit dictionary also accepts fields from UIEventInit and from EventInit dictionaries.

Specifications

Specification Status Comment
CSS Object Model (CSSOM) View Module
The definition of 'MouseEvent' in that specification.
Working Draft Redefines screen and client fields long to double.
WHATWG HTML Living Standard
The definition of 'region value' in that specification.
Living Standard From Document Object Model (DOM) Level 3 Events Specification, added the "region" value in the dictionary.
Document Object Model (DOM) Level 3 Events Specification
The definition of 'MouseEvent()' in that specification.
Working Draft Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 47 11 (11) No support (Yes) ?
"region" 51[1] 32 (32) ? ? ?
Redefined from long to double 56 ? ? ? ?
Feature Android Webview Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 47 47 11.0 (11) 11 ? ?
"region" No support No support 32.0 (32) ? ? ?
Redefined from long to double 56 56 ? ? ? ?

[1] Retrieving this value from MouseEvent.region requires enabling the ExperimentalCanvasFeatures flag.

Polyfill

You can polyfill the MouseEvent() constructor functionality in Internet Explorer 9 and higher with the following code:

(function (window) {
  try {
    new MouseEvent('test');
    return false; // No need to polyfill
  } catch (e) {
    // Need to polyfill - fall through
  }
  // Polyfills DOM4 MouseEvent
  var MouseEvent = function (eventType, params) {
    params = params || { bubbles: false, cancelable: false };
    var mouseEvent = document.createEvent('MouseEvent');
    mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    return mouseEvent;
  }
  MouseEvent.prototype = Event.prototype;
  window.MouseEvent = MouseEvent;
})(window);

See also

  • MouseEvent, the interface of the objects it constructs.

Document Tags and Contributors

 Last updated by: aheckmann,