MouseEvent : UIEvent

constructor

MouseEvent contains information describing the current event generated by a mouse action such as move or click.

Constructors

new MouseEvent(type : String, [eventInit : Object]) : MouseEvent

eventInit : {

bubbles :	Boolean
cancelable :	Boolean
view :	Window
detail :	Number
screenX :	Number
screenY :	Number
clientX :	Number
clientY :	Number
ctrlKey :	Boolean
shiftKey :	Boolean
altKey :	Boolean
metaKey :	Boolean
button :	Number
buttons :	Number
relatedTarget :	Element

}

Creates a new MouseEvent of the specified type and initial properties.

Spec

Instance Properties

altKey : Boolean readonly

true if the Alt key (Option on Mac) on the keyboard was pressed at the time the event was generated. See also getModifierState().

Example:

<pre id="element" style="background: #eee; height: 100px">
</pre>
<script>
  var element = document.getElementById('element');

  element.onmousemove = function(event) {
    element.textContent = 'screen: (' + event.screenX + ', ' + event.screenY + ')\n' +
                          'alt: ' + event.altKey;
                        
  };
</script>

Run

Results:

Spec

button : Number readonly

The mouse button that generated this event. 0 is the primary (left) button. 1 is the middle button. 2 is the secondary (right) button. See also buttons.

Example:

<pre id="element" style="background: #eee; height: 100px">
  button: <span id="button"></span>
  type: <span id="type"></span>
</pre>
<script>
  var buttonNames = { 0: 'left', 1: 'middle', 2: 'right' };

  var displayButtons = function(event) {
    document.getElementById('button').textContent = buttonNames[event.button];
    document.getElementById('type').textContent = event.type;
  };

  var element = document.getElementById('element');

  element.addEventListener('mousedown', displayButtons);
  element.addEventListener('mouseup', displayButtons);
</script>

Run

Results:

Spec

buttons : Number readonly

The bitwise combinations of mouse buttons pressed. 1 is the primary (left) button. 2 is the secondary (right) button. 4 is the middle button. 8 is the back mouse button. 16 is the forward mouse button. Will be 0 when no buttons are pressed. See also button.

Spec

clientX : Number readonly

The x position of the pointer relative to the viewport at the time the event fired. This is the same as x. See the corresponding clientY and alternative coordinates offsetX, pageX, and screenX.

Example:

<div id="element" style="background: radial-gradient(#aff, #bbb); height: 500px; width: 500px;">
</div>
<pre id="output" style="position: fixed; top: 10px; left: 20px; pointer-events: none;">
</pre>
<script>
  var element = document.getElementById('element');
  var output = document.getElementById('output');

  element.onmousemove = function(event) {
    output.textContent = 'x/y:    (' + event.x       + ', ' + event.y       + ')\n' +
                         'client: (' + event.clientX + ', ' + event.clientY + ')\n' +
                         'offset: (' + event.offsetX + ', ' + event.offsetY + ')\n' +
                         'page:   (' + event.pageX   + ', ' + event.pageY   + ')\n' +
                         'screen: (' + event.screenX + ', ' + event.screenY + ')\n';
  };
</script>

Run

Results:

Spec

clientY : Number readonly

The y position of the pointer relative to the viewport at the time the event fired. This is the same as y. See the corresponding clientX and alternative coordinates offsetY, pageY, and screenY.

Example:

<div id="element" style="background: radial-gradient(#aff, #bbb); height: 500px; width: 500px;">
</div>
<pre id="output" style="position: fixed; top: 10px; left: 20px; pointer-events: none;">
</pre>
<script>
  var element = document.getElementById('element');
  var output = document.getElementById('output');

  element.onmousemove = function(event) {
    output.textContent = 'x/y:    (' + event.x       + ', ' + event.y       + ')\n' +
                         'client: (' + event.clientX + ', ' + event.clientY + ')\n' +
                         'offset: (' + event.offsetX + ', ' + event.offsetY + ')\n' +
                         'page:   (' + event.pageX   + ', ' + event.pageY   + ')\n' +
                         'screen: (' + event.screenX + ', ' + event.screenY + ')\n';
  };
</script>

Run

Results:

Spec

ctrlKey : Boolean readonly

true if the Control key on the keyboard was pressed at the time the event was generated. See also getModifierState().

Example:

<pre id="element" style="background: #eee; height: 100px">
</pre>
<script>
  var element = document.getElementById('element');

  element.onmousemove = function(event) {
    element.textContent = 'screen: (' + event.screenX + ', ' + event.screenY + ')\n' +
                          'ctrl: ' + event.ctrlKey;
                        
  };
</script>

Run

Results:

Spec

metaKey : Boolean readonly

true if the keyboard's meta (Command on Mac, not available on Windows) key was pressed at the time the event was generated. See also getModifierState().

Example:

<pre id="element" style="background: #eee; height: 100px">
</pre>
<script>
  var element = document.getElementById('element');

  element.onmousemove = function(event) {
    element.textContent = 'screen: (' + event.screenX + ', ' + event.screenY + ')\n' +
                          'meta: ' + event.metaKey;
                        
  };
</script>

Run

Results:

Spec

movementX : Number readonly

The change in x position of the pointer since the last time the mouse move event fired. See the corresponding movementY and element.requestPointerLock().

Example:

<div id="element" style="background: radial-gradient(#aff, #bbb); height: 500px; width: 500px;">
</div>
<pre id="output" style="position: fixed; top: 10px; left: 20px; pointer-events: none;">
</pre>
<script>
  var element = document.getElementById('element');
  var output = document.getElementById('output');

  element.onmousemove = function(event) {
    output.textContent = 'x/y:      (' + event.x         + ', ' + event.y         + ')\n' +
                         'client:   (' + event.clientX   + ', ' + event.clientY   + ')\n' +
                         'movement: (' + event.movementX + ', ' + event.movementY + ')\n' +
                         'offset:   (' + event.offsetX   + ', ' + event.offsetY   + ')\n' +
                         'page:     (' + event.pageX     + ', ' + event.pageY     + ')\n' +
                         'screen:   (' + event.screenX   + ', ' + event.screenY   + ')\n';
  };
</script>

Run

Results:

Spec

movementY : Number readonly

The change in y position of the pointer since the last time the mouse move event fired. See the corresponding movementX and element.requestPointerLock().

Example:

<div id="element" style="background: radial-gradient(#aff, #bbb); height: 500px; width: 500px;">
</div>
<pre id="output" style="position: fixed; top: 10px; left: 20px; pointer-events: none;">
</pre>
<script>
  var element = document.getElementById('element');
  var output = document.getElementById('output');

  element.onmousemove = function(event) {
    output.textContent = 'x/y:      (' + event.x         + ', ' + event.y         + ')\n' +
                         'client:   (' + event.clientX   + ', ' + event.clientY   + ')\n' +
                         'movement: (' + event.movementX + ', ' + event.movementY + ')\n' +
                         'offset:   (' + event.offsetX   + ', ' + event.offsetY   + ')\n' +
                         'page:     (' + event.pageX     + ', ' + event.pageY     + ')\n' +
                         'screen:   (' + event.screenX   + ', ' + event.screenY   + ')\n';
  };
</script>

Run

Results:

Spec

offsetX : Number readonly

The x position of the pointer relative to this the time the event fired. See the corresponding offsetY and alternative coordinates x, clientX, pageX, and screenX.

Example:

<div id="element" style="background: radial-gradient(#aff, #bbb); height: 500px; width: 500px;">
</div>
<pre id="output" style="position: fixed; top: 10px; left: 20px; pointer-events: none;">
</pre>
<script>
  var element = document.getElementById('element');
  var output = document.getElementById('output');

  element.onmousemove = function(event) {
    output.textContent = 'x/y:    (' + event.x       + ', ' + event.y       + ')\n' +
                         'client: (' + event.clientX + ', ' + event.clientY + ')\n' +
                         'offset: (' + event.offsetX + ', ' + event.offsetY + ')\n' +
                         'page:   (' + event.pageX   + ', ' + event.pageY   + ')\n' +
                         'screen: (' + event.screenX + ', ' + event.screenY + ')\n';
  };
</script>

Run

Results:

Spec

offsetY : Number readonly

The y position of the pointer relative to this at the time the event fired. See the corresponding offsetX and alternative coordinates y, clientY, pageY, and screenY.

Example:

<div id="element" style="background: radial-gradient(#aff, #bbb); height: 500px; width: 500px;">
</div>
<pre id="output" style="position: fixed; top: 10px; left: 20px; pointer-events: none;">
</pre>
<script>
  var element = document.getElementById('element');
  var output = document.getElementById('output');

  element.onmousemove = function(event) {
    output.textContent = 'x/y:    (' + event.x       + ', ' + event.y       + ')\n' +
                         'client: (' + event.clientX + ', ' + event.clientY + ')\n' +
                         'offset: (' + event.offsetX + ', ' + event.offsetY + ')\n' +
                         'page:   (' + event.pageX   + ', ' + event.pageY   + ')\n' +
                         'screen: (' + event.screenX + ', ' + event.screenY + ')\n';
  };
</script>

Run

Results:

Spec

pageX : Number readonly

The x position of the pointer relative to the page at the time the event fired. Same as this.clientX + window.scrollX. See the corresponding pageY and alternative coordinates x, clientX, offsetX, and screenX.

Example:

<div id="element" style="background: radial-gradient(#aff, #bbb); height: 500px; width: 500px;">
</div>
<pre id="output" style="position: fixed; top: 10px; left: 20px; pointer-events: none;">
</pre>
<script>
  var element = document.getElementById('element');
  var output = document.getElementById('output');

  element.onmousemove = function(event) {
    output.textContent = 'x/y:    (' + event.x       + ', ' + event.y       + ')\n' +
                         'client: (' + event.clientX + ', ' + event.clientY + ')\n' +
                         'offset: (' + event.offsetX + ', ' + event.offsetY + ')\n' +
                         'page:   (' + event.pageX   + ', ' + event.pageY   + ')\n' +
                         'screen: (' + event.screenX + ', ' + event.screenY + ')\n';
  };
</script>

Run

Results:

Spec

pageY : Number readonly

The y position of the pointer relative to the page at the time the event fired. Same as this.clientY + window.scrollY. See the corresponding pageX and alternative coordinates y, clientY, offsetY, and screenY.

Example:

<div id="element" style="background: radial-gradient(#aff, #bbb); height: 500px; width: 500px;">
</div>
<pre id="output" style="position: fixed; top: 10px; left: 20px; pointer-events: none;">
</pre>
<script>
  var element = document.getElementById('element');
  var output = document.getElementById('output');

  element.onmousemove = function(event) {
    output.textContent = 'x/y:    (' + event.x       + ', ' + event.y       + ')\n' +
                         'client: (' + event.clientX + ', ' + event.clientY + ')\n' +
                         'offset: (' + event.offsetX + ', ' + event.offsetY + ')\n' +
                         'page:   (' + event.pageX   + ', ' + event.pageY   + ')\n' +
                         'screen: (' + event.screenX + ', ' + event.screenY + ')\n';
  };
</script>

Run

Results:

Spec

relatedTarget : Element readonly

Only applies to focusin, focusout, mouseenter, mouseleave, mouseout, mouseover, dragenter, and dragexit events. It is the element that receives the opposite event pair for this event. For example, the relatedTarget of a mouseenter is the element that will receive the mouseleave event.

Spec

screenX : Number readonly

The x position of the pointer on the screen at the time the event fired. See the corresponding screenY and alternative coordinates x, clientX, offsetX, and pageX.

Example:

<div id="element" style="background: radial-gradient(#aff, #bbb); height: 500px; width: 500px;">
</div>
<pre id="output" style="position: fixed; top: 10px; left: 20px; pointer-events: none;">
</pre>
<script>
  var element = document.getElementById('element');
  var output = document.getElementById('output');

  element.onmousemove = function(event) {
    output.textContent = 'x/y:    (' + event.x       + ', ' + event.y       + ')\n' +
                         'client: (' + event.clientX + ', ' + event.clientY + ')\n' +
                         'offset: (' + event.offsetX + ', ' + event.offsetY + ')\n' +
                         'page:   (' + event.pageX   + ', ' + event.pageY   + ')\n' +
                         'screen: (' + event.screenX + ', ' + event.screenY + ')\n';
  };
</script>

Run

Results:

Spec

screenY : Number readonly

The y position of the pointer on the screen at the time the event fired. See the corresponding screenX and alternative coordinates y, clientY, offsetY, and pageY.

Example:

<div id="element" style="background: radial-gradient(#aff, #bbb); height: 500px; width: 500px;">
</div>
<pre id="output" style="position: fixed; top: 10px; left: 20px; pointer-events: none;">
</pre>
<script>
  var element = document.getElementById('element');
  var output = document.getElementById('output');

  element.onmousemove = function(event) {
    output.textContent = 'x/y:    (' + event.x       + ', ' + event.y       + ')\n' +
                         'client: (' + event.clientX + ', ' + event.clientY + ')\n' +
                         'offset: (' + event.offsetX + ', ' + event.offsetY + ')\n' +
                         'page:   (' + event.pageX   + ', ' + event.pageY   + ')\n' +
                         'screen: (' + event.screenX + ', ' + event.screenY + ')\n';
  };
</script>

Run

Results:

Spec

shiftKey : Boolean readonly

true if the Shift key on the keyboard was pressed at the time the event was generated. See also getModifierState().

Example:

<pre id="element" style="background: #eee; height: 100px">
</pre>
<script>
  var element = document.getElementById('element');

  element.onmousemove = function(event) {
    element.textContent = 'screen: (' + event.screenX + ', ' + event.screenY + ')\n' +
                          'shift: ' + event.shiftKey;
                        
  };
</script>

Run

Results:

Spec

x : Number readonly

The x position of the pointer relative to the viewport at the time the event fired. This is the same as clientX. See the corresponding y and alternative coordinates offsetX, pageX, and screenX.

Example:

<div id="element" style="background: radial-gradient(#aff, #bbb); height: 500px; width: 500px;">
</div>
<pre id="output" style="position: fixed; top: 10px; left: 20px; pointer-events: none;">
</pre>
<script>
  var element = document.getElementById('element');
  var output = document.getElementById('output');

  element.onmousemove = function(event) {
    output.textContent = 'x/y:    (' + event.x       + ', ' + event.y       + ')\n' +
                         'client: (' + event.clientX + ', ' + event.clientY + ')\n' +
                         'offset: (' + event.offsetX + ', ' + event.offsetY + ')\n' +
                         'page:   (' + event.pageX   + ', ' + event.pageY   + ')\n' +
                         'screen: (' + event.screenX + ', ' + event.screenY + ')\n';
  };
</script>

Run

Results:

Spec

y : Number readonly

The y position of the pointer relative to the viewport at the time the event fired. This is the same as clientY. See the corresponding x and alternative coordinates offsetY, pageY, and screenY.

Example:

<div id="element" style="background: radial-gradient(#aff, #bbb); height: 500px; width: 500px;">
</div>
<pre id="output" style="position: fixed; top: 10px; left: 20px; pointer-events: none;">
</pre>
<script>
  var element = document.getElementById('element');
  var output = document.getElementById('output');

  element.onmousemove = function(event) {
    output.textContent = 'x/y:    (' + event.x       + ', ' + event.y       + ')\n' +
                         'client: (' + event.clientX + ', ' + event.clientY + ')\n' +
                         'offset: (' + event.offsetX + ', ' + event.offsetY + ')\n' +
                         'page:   (' + event.pageX   + ', ' + event.pageY   + ')\n' +
                         'screen: (' + event.screenX + ', ' + event.screenY + ')\n';
  };
</script>

Run

Results:

Spec

Instance Methods

getModifierState(modifierKey : String) : Boolean

Returns true if the the modifierKey is pressed or active. modifierKey must be one of 'Alt', 'AltGraph', 'CapsLock', 'Control', 'Fn', 'Meta', 'NumLock', 'ScrollLock', 'Shift', or 'SymbolLock'.

Spec

home license contribute feedback toggle light/dark mode