Web/API/MouseEvent/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 ModuleThe definition of 'MouseEvent' in that specification.	Working Draft	Redefines screen and client fields long to double.
Document Object Model (DOM) Level 3 Events SpecificationThe definition of 'MouseEvent()' in that specification.	Obsolete	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`MouseEvent()` constructor	Chrome Full support 47	Edge Full support ≤79	Firefox Full support 11	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support 47	Chrome Android Full support 47	Firefox Android Full support 14	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support 5.0
Redefined `mouseEventInit` fields from `long` to `double`	Chrome Full support 56	Edge Full support ≤79	Firefox ?	IE No support No	Opera ?	Safari ?	WebView Android Full support 56	Chrome Android Full support 56	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android Full support 6.0
Support for `mouseEventInit` optional `region` field	Chrome Full support 51 Notes' Disabled' Full support 51 Notes' Disabled' Notes' Flag needed to retrieve value from `MouseEvent.region`. Disabled' From version 51: this feature is behind the `Experimental Web Platform Features` preference (needs to be set to `true`). To change preferences in Chrome, visit chrome://flags.	Edge Full support ≤79 Notes' Disabled' Full support ≤79 Notes' Disabled' Notes' Flag needed to retrieve value from `MouseEvent.region`. Disabled' From version ≤79: this feature is behind the `Experimental Web Platform Features` preference (needs to be set to `true`).	Firefox Full support 32	IE No support No	Opera ?	Safari ?	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 32	Opera Android ?	Safari iOS ?	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support
Compatibility unknown: Compatibility unknown
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.

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 MouseEventPolyfill = function (eventType, params) {
        params = params || { bubbles: false, cancelable: false };
        var mouseEvent = document.createEvent('MouseEvent');
        mouseEvent.initMouseEvent(eventType, 
            params.bubbles,
            params.cancelable,
            window,
            0,
            params.screenX || 0,
            params.screenY || 0,
            params.clientX || 0,
            params.clientY || 0,
            params.ctrlKey || false,
            params.altKey || false,
            params.shiftKey || false,
            params.metaKey || false,
            params.button || 0,
            params.relatedTarget || null
        );

        return mouseEvent;
    }

    MouseEventPolyfill.prototype = Event.prototype;

    window.MouseEvent = MouseEventPolyfill;
})(window);