---
title: MouseEvent
slug: Web/API/MouseEvent
tags:
  - API
  - DOM
  - DOM Events
  - Interface
  - Reference
translation_of: Web/API/MouseEvent
---
<p id="Summary">{{APIRef("DOM Events")}}</p>

<p>Die <strong><code>MouseEvent</code></strong> Schnittstelle stellt Events bereit, die während der Benutzerinteraktion mit einem Zeigegerät (zum Beispiel eine Maus) auftreten. Häufige Events, die diese Schnittstelle nutzen sind {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}}, {{event("mousedown")}}.</p>

<p><code>MouseEvent</code> wird vererbt von {{domxref("UIEvent")}}, welches wiederum vererbt wird von {{domxref("Event")}}. Obwohl die {{domxref("MouseEvent.initMouseEvent()")}} Methode wegen der Rückwärtskompatibilität bleibt, sollte das Erstellen eines <code>MouseEvent</code> Objekts durch den {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}} Konstruktor erfolgen.</p>

<p>Mehrere spezifischere Events basieren auf MouseEvent, davon {{domxref("WheelEvent")}} und {{domxref("DragEvent")}}.</p>

<h2 id="Konstruktor">Konstruktor</h2>

<dl>
 <dt>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</dt>
 <dd>Erstellt ein<code>MouseEvent</code> Objekt.</dd>
</dl>

<h2 id="Eigenschaften">Eigenschaften</h2>

<p><em>Diese Schnittstelle erbt Eigenschaften der Elternobjekte {{domxref("UIEvent")}} und {{domxref("Event")}}.</em></p>

<dl>
 <dt>{{domxref("MouseEvent.altKey")}} {{readonlyinline}}</dt>
 <dd>Gibt <code>true</code> zurück wenn die <kbd>alt</kbd> Taste gedrückt war, während das MouseEvent ausgelöst wurde.</dd>
 <dt>{{domxref("MouseEvent.button")}} {{readonlyinline}}</dt>
 <dd>Die Nummer des Buttons der gedrückt wurde (wenn anwendbar), während das MouseEvent ausgelöst wurde.</dd>
 <dt>{{domxref("MouseEvent.buttons")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}</dt>
 <dd>
 <p>Die Buttons, die losgelassen wurden (sofern vorhanden) während das MouseEvent ausgelöst wurde.</p>
 </dd>
 <dt>{{domxref("MouseEvent.clientX")}} {{readonlyinline}}</dt>
 <dd>Die x-Koordinate des Mauszeigers in lokalen (DOM Inhalt) Koordinaten.</dd>
 <dt>{{domxref("MouseEvent.clientY")}} {{readonlyinline}}</dt>
 <dd>Die y-Koordinate des Mauszeigers in lokalen (DOM Inhalt) Koordinaten.</dd>
 <dt>{{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}</dt>
 <dd>Gibt <code>true</code> zurück, wenn die <kbd>control</kbd> Taste gedrückt war, während das MouseEvent ausgelöst wurde.</dd>
 <dt>{{domxref("MouseEvent.metaKey")}} {{readonlyinline}}</dt>
 <dd>Gibt <code>true</code> zurück, wenn die <kbd>meta</kbd> Taste gedrückt war, während das MouseEvent ausgelöst wurde.</dd>
 <dt>{{domxref("MouseEvent.movementX")}} {{readonlyinline}}</dt>
 <dd>Die x-Koordinate des Mauszeigers relativ zur Position des letzten {{event("mousemove")}} Events.</dd>
 <dt>{{domxref("MouseEvent.movementY")}} {{readonlyinline}}</dt>
 <dd>Die y-Koordinate des Mauszeigers relativ zur Position des letzten {{event("mousemove")}} Events.</dd>
 <dt>{{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}}</dt>
 <dd>Die x-Koordinate des Mauszeigers relativ zur Position zur padding-Kante des Zielknotens.</dd>
 <dt>{{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}}</dt>
 <dd>Die y-Koordinate des Mauszeigers relativ zur Position zur padding-Kante des Zielknotens.</dd>
 <dt>{{domxref("MouseEvent.pageX")}} {{readonlyinline}}{{experimental_inline}}</dt>
 <dd>Die x-Koordinate des Mauszeigers relativ zum gesamten Dokument.</dd>
 <dt>{{domxref("MouseEvent.pageY")}} {{readonlyinline}}{{experimental_inline}}</dt>
 <dd>Die y-Koordinate des Mauszeigers relativ zum gesamten Dokument.</dd>
 <dt>{{domxref("MouseEvent.region")}} {{readonlyinline}}</dt>
 <dd>Gibt die id des Trefferbereichs wieder, die von dem Event betroffen ist. Wenn kein Trefferbereich betroffen ist, wird <code>null</code> zurückgegeben.</dd>
 <dt>{{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}</dt>
 <dd>
 <p>Das sekundäre Zielobjekt des Events, sofern verfügbar.</p>
 </dd>
 <dt>{{domxref("MouseEvent.screenX")}} {{readonlyinline}}</dt>
 <dd>Die x-Koordinate des Mauszeigers in globalen (Bildschirm) Koordinaten.</dd>
 <dt>{{domxref("MouseEvent.screenY")}} {{readonlyinline}}</dt>
 <dd>Die y-Koordinate des Mauszeigers in globalen (Bildschirm) Koordinaten.</dd>
 <dt>{{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}</dt>
 <dd>Gibt <code>true</code> zurück, wenn die <kbd>shift</kbd> Taste gedrückt war, während das MouseEvent ausgelöst wurde.</dd>
 <dt>{{domxref("MouseEvent.which")}} {{non-standard_inline}} {{readonlyinline}}</dt>
 <dd>Der Button, der gedrückt war, als das MouseEvent ausgelöst wurde.</dd>
 <dt>{{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
 <dd>Die Stärke des Drucks, die auf ein Touch- oder Tabletgerät ausgeübt wurde, während das Event ausgelöst wurde. Der Wert bewegt sich zwischen <code>0.0</code> (Minimalste Druckstärke) und <code>1.0</code> (Maximalster Druckstärke)</dd>
 <dt>{{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
 <dd>
 <p>Der Typ des Geräts das den Event generiert hat (eine der <code>MOZ_SOURCE_*</code> Konstanten die weiter unten gelistet werden). Es ermöglicht zum Beispiel die Bestimmung ob ein MouseEvent tatsächlich von einer Maus oder von einem Touchgerät ausgelöst wurde (welches den Grad der Genauigkeit beeinflusst, mit dem man die Koordinaten des Events betrachten kann).</p>
 </dd>
 <dt>{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
 <dd>Die Stärke des Drucks, die beim Klick angewendet wurde.</dd>
 <dt>{{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}}</dt>
 <dd>Alias auf {{domxref("MouseEvent.clientX")}}.</dd>
 <dt>{{domxref("MouseEvent.y")}} {{experimental_inline}}{{readonlyinline}}</dt>
 <dd>Alias auf {{domxref("MouseEvent.clientY")}}</dd>
</dl>

<h2 id="Konstanten">Konstanten</h2>

<dl>
 <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
 <dd>Minimum der Kraft, die für einen normalen Klick notwendig ist.</dd>
 <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
 <dd>Minimum der Kraft, die für einen Force-Click notwendig ist.</dd>
</dl>

<h2 id="Methoden">Methoden</h2>

<p><em>Das Interface erbt auch die Methoden seiner Eltern, {{domxref("UIEvent")}} und {{domxref("Event")}}.</em></p>

<dl>
 <dt>{{domxref("MouseEvent.getModifierState()")}}</dt>
 <dd>Gibt den aktuellen Zustand der angegebenen Modifizierungstaste zurück. Für Detailinformationen siehe {{domxref("KeyboardEvent.getModifierState()")}}.</dd>
 <dt>{{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}</dt>
 <dd>Initialisiert den Wert eines erzeugten <code>MouseEvent</code>. Wenn der Event bereits ausgesendet wurde, wird durch diese Methode nichts passieren.</dd>
</dl>

<h2 id="Beispiele">Beispiele</h2>

<p>Dieses Beispiel demonstriert das Simulieren eines Klicks (die programmatische Erzeugung eines Klickereignisses) auf eine Checkbox mittels DOM Methoden. </p>

<pre class="brush: js">function simulateClick() {
  var evt = new <a href="/en-US/docs/Web/API/MouseEvent">MouseEvent</a>("click", {
    bubbles: true,
    cancelable: true,
    view: window
  });
  var cb = document.getElementById("checkbox"); //element to click on
  var canceled = !cb.<a href="/en-US/docs/Web/API/EventTarget.dispatchEvent" rel="internal" title="en/DOM/element.dispatchEvent">dispatchEvent</a>(evt);
  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}
document.getElementById("button").addEventListener('click', simulateClick);</pre>

<pre class="brush: html">&lt;p&gt;&lt;label&gt;&lt;input type="checkbox" id="checkbox"&gt; Checked&lt;/label&gt;
&lt;p&gt;&lt;button id="button"&gt;Click me&lt;/button&gt;</pre>

<p>Auf den Button klicken, um zu sehen wie das Beispiel funktioniert:</p>

<p>{{ EmbedLiveSample('Example', '', '', '') }}</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td>
   <td>{{Spec2('CSSOM View')}}</td>
   <td>Redefines <code>MouseEvent</code> from long to double. This means that a <code>PointerEvent</code> whose <code>pointerType</code> is mouse will be a double.</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>From {{SpecName('DOM3 Events')}}, added the <code>region</code> property.</td>
  </tr>
  <tr>
   <td>{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}</td>
   <td>{{Spec2('Pointer Lock')}}</td>
   <td>From {{SpecName('DOM3 Events')}}, added <code>movementX</code> and <code>movementY</code> properties.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td>
   <td>{{Spec2('CSSOM View')}}</td>
   <td>From {{SpecName('DOM3 Events')}}, added <code>offsetX</code> and <code>offsetY</code>, <code>pageX</code> and <code>pageY</code>, <code>x,</code> and <code>y</code> properties. Redefined screen, page, client and coordinate (x and y) properties as <code>double</code> from <code>long</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}</td>
   <td>{{Spec2('DOM3 Events')}}</td>
   <td>From {{SpecName('DOM2 Events')}}, added the <code>MouseEvent()</code> constructor, the <code>getModifierState()</code> method and the <code>buttons</code> property.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}</td>
   <td>{{Spec2('DOM2 Events')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{CompatVersionUnknown()}}</td>
  </tr>
  <tr>
   <td>{{domxref("MouseEvent.movementX","movementX")}}<br>
    {{domxref("MouseEvent.movementY","movementY")}}</td>
   <td>{{CompatChrome(37)}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{CompatVersionUnknown()}} {{property_prefix("moz")}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>{{ domxref("MouseEvent.buttons", "buttons") }}</td>
   <td>{{CompatChrome(43)}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>{{ domxref("MouseEvent.which", "which") }}</td>
   <td>{{CompatChrome(1)}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>1.0</td>
   <td>9.0</td>
   <td>5.0</td>
   <td>1.0</td>
  </tr>
  <tr>
   <td>{{domxref("MouseEvent.getModifierState()", "getModifierState()")}}</td>
   <td>{{CompatChrome(47)}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{CompatGeckoDesktop(15)}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{CompatVersionUnknown()}}</td>
  </tr>
  <tr>
   <td>{{domxref("MouseEvent.mozPressure", "mozPressure")}} and {{domxref("MouseEvent.mozInputSource", "mozInputSource")}} {{non-standard_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{CompatGeckoDesktop(2)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</td>
   <td>{{CompatChrome(45)}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{CompatGeckoDesktop(11)}}</td>
   <td>9.0</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>{{domxref("MouseEvent.region")}}</td>
   <td>{{CompatChrome(51)}}<sup>[1]</sup></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{CompatGeckoDesktop(32)}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>{{domxref("MouseEvent.offsetX")}}, and {{domxref("MouseEvent.offsetY")}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>9</td>
   <td>{{CompatGeckoDesktop(40)}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>{{domxref("MouseEvent.screenX")}}, {{domxref("MouseEvent.screenY")}}, {{domxref("MouseEvent.clientX")}}, and {{domxref("MouseEvent.Y")}} are double instead of long.</td>
   <td>{{CompatChrome(56)}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Setzt das Aktivieren von <code>ExperimentalCanvasFeatures</code> voraus.</p>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>Das direkte Elternobjekt, {{domxref("UIEvent")}}.</li>
</ul>