The MouseEvent() constructor creates a new MouseEvent.
Syntax
event = new MouseEvent(typeArg, mouseEventInit);
Values
- typeArg
- Is a
DOMStringrepresenting the name of the event. - mouseEventInit Optional
- Is a
MouseEventInitdictionary, having the following fields:"screenX", optional and defaulting to0, of typelong, 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 to0, of typelong, 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 to0, of typelong, 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 to0, of typelong, 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 tofalse, of typeBoolean, that indicates if the ctrl key was simultaneously pressed."shiftKey", optional and defaulting tofalse, of typeBoolean, that indicates if the shift key was simultaneously pressed."altKey", optional and defaulting tofalse, of typeBoolean, that indicates if the alt key was simultaneously pressed."metaKey", optional and defaulting tofalse, of typeBoolean, that indicates if the meta key was simultaneously pressed."button", optional and defaulting to0, of typeshort, that describes which button is pressed during events related to the press or release of a button:Value Meaning 0Main button pressed (usually the left button) or un-initialized 1Auxiliary button pressed (usually the middle button) 2Secondary button pressed (usually the right button) "buttons", optional and defaulting to0, of typeunsigned short, that describes which buttons are pressed when the event is launched:Bit-field value Meaning 0No button pressed 1Main button pressed (usually the left button) 2Secondary button pressed (usually the right button) 4Auxiliary button pressed (usually the middle button) "relatedTarget", optional and defaulting tonull, of typeEventTarget, that is the element just left (in case of amouseenterormouseover) or is entering (in case of amouseoutormouseleave)."region", optional and defaulting tonull, of typeDOMString, is the id of the hit region affected by the event. The absence of any hit region is affected, is represented by thenullvalue.
In some implementations, passing anything other than a number for the screen and client fields will throw a
TypeError.The
MouseEventInitdictionary also accepts fields fromUIEventInitand fromEventInitdictionaries.
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
Tags:
Contributors to this page:
aheckmann,
Sheppy,
DmitryEfimenko,
thEpisode,
jpmedley,
vanslly,
siirila,
bethge,
rodrigoteobaldo,
teoli,
michael-speed-elder,
samoxbal
Last updated by:
aheckmann,