mozilla

Revision 409121 of MouseEvent

  • Revision slug: Web/API/MouseEvent
  • Revision title: MouseEvent
  • Revision id: 409121
  • Created:
  • Creator: Nickolay
  • Is current revision? No
  • Comment

Revision Content

The DOM MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse).

Common events using this interface include {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}}, {{event("mousedown")}}. The list of all events using this interface is provided in the Events reference.

MouseEvent derives from {{domxref("UIEvent")}}, which in turn derives from {{domxref("Event")}}.

Method overview

boolean getModifierState(in DOMString keyArg);

Properties

Property Type Description
screenX long The X coordinate of the mouse pointer in global (screen) coordinates. Read only.
screenY long The Y coordinate of the mouse pointer in global (screen) coordinates. Read only.
clientX long The X coordinate of the mouse pointer in local (DOM content) coordinates. Read only.
clientY long The Y coordinate of the mouse pointer in local (DOM content) coordinates. Read only.
ctrlKey boolean true if the control key was down when the mouse event was fired. Read only.
shiftKey boolean true if the shift key was down when the mouse event was fired. Read only.
altKey boolean true if the alt key was down when the mouse event was fired. Read only.
metaKey boolean true if the meta key was down when the mouse event was fired. Read only.
button unsigned short The button number that was pressed when the mouse event was fired. Read only.

Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.

buttons {{ dom_level("3") }} {{ gecko_minversion_inline("15.0") }} unsigned short

The buttons being pressed when the mouse event was fired. Read only.

Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2).

Gecko supports this attribute on Windows, Linux (GTK) and Mac.

  • On Windows, if user installed a mouse driver and its utility software which can customize button actions (e.g., IntelliPoint and SetPoint), the Middle (wheel) button, 4th button and 5th button may not be set actually even when they're pressed.
  • On Linux (GTK), 4th button and 5th button are not supported. And also, mouseup event always have the releasing button information in this attribute value.
  • On Mac OS X 10.5, buttons attribute always returns 0 because there is no platform API for implementing this feature.
relatedTarget {{interface("nsIDOMEventTarget")}} The target to which the event applies. Read only.
mozPressure {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }} float The amount of pressure applied to a touch or tablet device when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure). Read only.
mozInputSource {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }} unsigned short

The type of device that generated the event (one of the MOZ_SOURCE_* constants listed below). Read only.

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

Methods

getModifierState()

Returns the current state of the specified modifier key. See the {{domxref("KeyboardEvent", 0, "getModifierState()")}} documentation for details. {{ dom_level("3") }} {{ gecko_minversion_inline("15.0") }}

boolean getModifierState(
  in DOMString keyArg
);

Constants

{{ Non-standard_header() }}

The possible values for MouseEvent.mozInputSource are listed in the following table. They are available as properties on the MouseEvent interface (e.g. MouseEvent.MOZ_SOURCE_UNKNOWN).

Constant name Value Desription
MOZ_SOURCE_UNKNOWN 0 The input device is unknown.
MOZ_SOURCE_MOUSE 1 The event was generated by a mouse (or mouse-like device).
MOZ_SOURCE_PEN 2 The event was generated by a pen on a tablet.
MOZ_SOURCE_ERASER 3 The event was generated by an eraser on a tablet.
MOZ_SOURCE_CURSOR 4 The event was generated by a cursor.
MOZ_SOURCE_TOUCH 5 The event was generated on a touch interface.
MOZ_SOURCE_KEYBOARD 6 The event was generated by a keyboard.

Specification

Revision Source

<p>The DOM&nbsp;<code>MouseEvent</code> interface represents events that occur due to the user interacting with a pointing device (such as a mouse).</p>
<p>Common events using this interface include {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}}, {{event("mousedown")}}. The list of all events using this interface is provided in the <a href="/en-US/docs/Web/Reference/Events" title="/en-US/docs/Web/Reference/Events">Events reference</a>.</p>
<p><code>MouseEvent</code> derives from {{domxref("UIEvent")}}, which in turn derives from {{domxref("Event")}}.</p>
<h2 id="Method_overview">Method overview</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td><code>boolean <a href="#getModifierState()">getModifierState</a>(in DOMString keyArg);</code></td>
    </tr>
  </tbody>
</table>
<h2 id="Properties">Properties</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td class="header">Property</td>
      <td class="header">Type</td>
      <td class="header">Description</td>
    </tr>
    <tr>
      <td><code>screenX</code></td>
      <td><code>long</code></td>
      <td>The X coordinate of the mouse pointer in global (screen)&nbsp;coordinates. <strong>Read only.</strong></td>
    </tr>
    <tr>
      <td><code>screenY</code></td>
      <td><code>long</code></td>
      <td>The Y coordinate of the mouse pointer in global (screen)&nbsp;coordinates. <strong>Read only.</strong></td>
    </tr>
    <tr>
      <td><code>clientX</code></td>
      <td><code>long</code></td>
      <td>The X coordinate of the mouse pointer in local (DOM content)&nbsp;coordinates. <strong>Read only.</strong></td>
    </tr>
    <tr>
      <td><code>clientY</code></td>
      <td><code>long</code></td>
      <td>The Y coordinate of the mouse pointer in local (DOM content)&nbsp;coordinates. <strong>Read only.</strong></td>
    </tr>
    <tr>
      <td><code>ctrlKey</code></td>
      <td><code>boolean</code></td>
      <td><code>true</code> if the control key was down when the mouse event was fired. <strong>Read only.</strong></td>
    </tr>
    <tr>
      <td><code>shiftKey</code></td>
      <td><code>boolean</code></td>
      <td><code>true</code> if the shift key was down when the mouse event was fired. <strong>Read only.</strong></td>
    </tr>
    <tr>
      <td><code>altKey</code></td>
      <td><code>boolean</code></td>
      <td><code>true</code> if the alt key was down when the mouse event was fired. <strong>Read only.</strong></td>
    </tr>
    <tr>
      <td><code>metaKey</code></td>
      <td><code>boolean</code></td>
      <td><code>true</code> if the meta key was down when the mouse event was fired. <strong>Read only.</strong></td>
    </tr>
    <tr>
      <td><code>button</code></td>
      <td><code>unsigned short</code></td>
      <td>The button number that was pressed when the mouse event was fired. <strong>Read only.</strong>
<p>Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</p> </td>
    </tr>
    <tr>
      <td><code>buttons</code> {{ dom_level("3") }} {{ gecko_minversion_inline("15.0") }}</td>
      <td><code>unsigned short</code></td>
      <td>
        <p>The buttons being pressed when the mouse event was fired. <strong>Read only.</strong></p>
<p> Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). </p>
        <div class="note">
          <p>Gecko supports this attribute on Windows, Linux (GTK) and Mac.</p>
          <ul>
            <li>On Windows, if user installed a mouse driver and its utility software which can customize button actions (e.g., IntelliPoint and SetPoint), the Middle (wheel) button, 4th button and 5th button may not be set actually even when they're pressed.</li>
            <li>On Linux (GTK), 4th button and 5th button are not supported. And also, <code>mouseup</code> event always have the releasing button information in this attribute value.</li>
            <li>On Mac OS X 10.5, buttons attribute always returns 0 because there is no platform API for implementing this feature.</li>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td><code>relatedTarget</code></td>
      <td>{{interface("nsIDOMEventTarget")}}</td>
      <td>The target to which the event applies. <strong>Read only.</strong></td>
    </tr>
    <tr>
      <td><code>mozPressure</code> {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}</td>
      <td><code>float</code></td>
      <td>The amount of pressure applied to a touch or tablet device when generating the event; this value ranges between 0.0 (minimum pressure)&nbsp;and 1.0 (maximum pressure). <strong>Read only.</strong></td>
    </tr>
    <tr>
      <td id="mozInputSource"><code>mozInputSource</code> {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}</td>
      <td><code>unsigned short</code></td>
      <td>
        <p>The type of device that generated the event (one of the <code>MOZ_SOURCE_*</code> constants listed <a href="#Constants">below</a>). <strong>Read only.</strong></p>
        <p>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).</p>
      </td>
    </tr>
  </tbody>
</table>
<h2 id="Methods">Methods</h2>
<h3 id="getModifierState()">getModifierState()</h3>
<p>Returns the current state of the specified modifier key. See the {{domxref("KeyboardEvent", 0, "getModifierState()")}} documentation for details. {{ dom_level("3") }} {{ gecko_minversion_inline("15.0") }}</p>
<pre>
boolean getModifierState(
&nbsp;&nbsp;in DOMString keyArg
);
</pre>
<h2 id="Constants">Constants</h2>
<p>{{ Non-standard_header() }}</p>
<p>The possible values for <a href="#mozInputSource"><code>MouseEvent.mozInputSource</code></a> are listed in the following table. They are available as properties on the <code>MouseEvent</code> interface (e.g. <code>MouseEvent.MOZ_SOURCE_UNKNOWN</code>).</p>
<table class="standard-table">
  <tbody>
    <tr>
      <th>Constant name</th>
      <th>Value</th>
      <th>Desription</th>
    </tr>
    <tr>
      <td><code>MOZ_SOURCE_UNKNOWN</code></td>
      <td>0</td>
      <td>The input device is unknown.</td>
    </tr>
    <tr>
      <td><code>MOZ_SOURCE_MOUSE</code></td>
      <td>1</td>
      <td>The event was generated by a mouse (or mouse-like device).</td>
    </tr>
    <tr>
      <td><code>MOZ_SOURCE_PEN</code></td>
      <td>2</td>
      <td>The event was generated by a pen on a tablet.</td>
    </tr>
    <tr>
      <td><code>MOZ_SOURCE_ERASER</code></td>
      <td>3</td>
      <td>The event was generated by an eraser on a tablet.</td>
    </tr>
    <tr>
      <td><code>MOZ_SOURCE_CURSOR</code></td>
      <td>4</td>
      <td>The event was generated by a cursor.</td>
    </tr>
    <tr>
      <td><code>MOZ_SOURCE_TOUCH</code></td>
      <td>5</td>
      <td>The event was generated on a touch interface.</td>
    </tr>
    <tr>
      <td><code>MOZ_SOURCE_KEYBOARD</code></td>
      <td>6</td>
      <td>The event was generated by a keyboard.</td>
    </tr>
  </tbody>
</table>
<h2 id="Specification">Specification</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent">DOM&nbsp;Level 2:&nbsp;MouseEvent</a></li>
  <li>
    <p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-MouseEvent" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-MouseEvent">DOM&nbsp;3 Events: MouseEvent</a></p>
  </li>
</ul>
Revert to this revision