MouseEvent

Die MouseEvent 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 click, dblclick, mouseup, mousedown.

MouseEvent wird vererbt von UIEvent, welches wiederum vererbt wird von Event. Obwohl die MouseEvent.initMouseEvent() Methode wegen der Rückwärtskompatibilität bleibt, sollte das Erstellen eines MouseEvent Objekts durch den MouseEvent() Konstruktor erfolgen.

Mehrere spezifischere Events basieren auf MouseEvent, davon WheelEvent und DragEvent.

Konstruktor

MouseEvent()
Erstellt einMouseEvent Objekt.

Eigenschaften

Diese Schnittstelle erbt Eigenschaften der Elternobjekte UIEvent und Event.

MouseEvent.altKey Schreibgeschützt
Gibt true zurück wenn die alt Taste gedrückt war, während das MouseEvent ausgelöst wurde.
MouseEvent.button Schreibgeschützt
Die Nummer des Buttons der gedrückt wurde (wenn anwendbar), während das MouseEvent ausgelöst wurde.
MouseEvent.buttons Schreibgeschützt

Die Buttons, die losgelassen wurden (sofern vorhanden) während das MouseEvent ausgelöst wurde.

MouseEvent.clientX Schreibgeschützt
Die x-Koordinate des Mauszeigers in lokalen (DOM Inhalt) Koordinaten.
MouseEvent.clientY Schreibgeschützt
Die y-Koordinate des Mauszeigers in lokalen (DOM Inhalt) Koordinaten.
MouseEvent.ctrlKey Schreibgeschützt
Gibt true zurück, wenn die control Taste gedrückt war, während das MouseEvent ausgelöst wurde.
MouseEvent.metaKey Schreibgeschützt
Gibt true zurück, wenn die meta Taste gedrückt war, während das MouseEvent ausgelöst wurde.
MouseEvent.movementX Schreibgeschützt
Die x-Koordinate des Mauszeigers relativ zur Position des letzten mousemove Events.
MouseEvent.movementY Schreibgeschützt
Die y-Koordinate des Mauszeigers relativ zur Position des letzten mousemove Events.
MouseEvent.offsetX Schreibgeschützt This is an experimental API that should not be used in production code.
Die x-Koordinate des Mauszeigers relativ zur Position zur padding-Kante des Zielknotens.
MouseEvent.offsetY Schreibgeschützt This is an experimental API that should not be used in production code.
Die y-Koordinate des Mauszeigers relativ zur Position zur padding-Kante des Zielknotens.
MouseEvent.pageX Schreibgeschützt This is an experimental API that should not be used in production code.
Die x-Koordinate des Mauszeigers relativ zum gesamten Dokument.
MouseEvent.pageY Schreibgeschützt This is an experimental API that should not be used in production code.
Die y-Koordinate des Mauszeigers relativ zum gesamten Dokument.
MouseEvent.region Schreibgeschützt
Gibt die id des Trefferbereichs wieder, die von dem Event betroffen ist. Wenn kein Trefferbereich betroffen ist, wird null zurückgegeben.
MouseEvent.relatedTarget Schreibgeschützt

Das sekundäre Zielobjekt des Events, sofern verfügbar.

MouseEvent.screenX Schreibgeschützt
Die x-Koordinate des Mauszeigers in globalen (Bildschirm) Koordinaten.
MouseEvent.screenY Schreibgeschützt
Die y-Koordinate des Mauszeigers in globalen (Bildschirm) Koordinaten.
MouseEvent.shiftKey Schreibgeschützt
Gibt true zurück, wenn die shift Taste gedrückt war, während das MouseEvent ausgelöst wurde.
MouseEvent.which This API has not been standardized. Schreibgeschützt
Der Button, der gedrückt war, als das MouseEvent ausgelöst wurde.
MouseEvent.mozPressure This API has not been standardized. Schreibgeschützt
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 0.0 (Minimalste Druckstärke) und 1.0 (Maximalster Druckstärke)
MouseEvent.mozInputSource This API has not been standardized. Schreibgeschützt

Der Typ des Geräts das den Event generiert hat (eine der MOZ_SOURCE_* 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).

MouseEvent.webkitForce This API has not been standardized. Schreibgeschützt
Die Stärke des Drucks, die beim Klick angewendet wurde.
MouseEvent.x This is an experimental API that should not be used in production code. Schreibgeschützt
Alias auf MouseEvent.clientX.
MouseEvent.y This is an experimental API that should not be used in production code. Schreibgeschützt
Alias auf MouseEvent.clientY

Konstanten

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN This API has not been standardized. Schreibgeschützt
Minimum der Kraft, die für einen normalen Klick notwendig ist.
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN This API has not been standardized. Schreibgeschützt
Minimum der Kraft, die für einen Force-Click notwendig ist.

Methoden

Das Interface erbt auch die Methoden seiner Eltern, UIEvent und Event.

MouseEvent.getModifierState()
Gibt den aktuellen Zustand der angegebenen Modifizierungstaste zurück. Für Detailinformationen siehe KeyboardEvent.getModifierState().
MouseEvent.initMouseEvent() This deprecated API should no longer be used, but will probably still work.
Initialisiert den Wert eines erzeugten MouseEvent. Wenn der Event bereits ausgesendet wurde, wird durch diese Methode nichts passieren.

Beispiele

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

function simulateClick() {
  var evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window
  });
  var cb = document.getElementById("checkbox"); //element to click on
  var canceled = !cb.dispatchEvent(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);
<p><label><input type="checkbox" id="checkbox"> Checked</label>
<p><button id="button">Click me</button>

Auf den Button klicken, um zu sehen wie das Beispiel funktioniert:

Spezifikationen

Specification Status Comment
CSS Object Model (CSSOM) View Module
Die Definition von 'MouseEvent' in dieser Spezifikation.
Arbeitsentwurf Redefines MouseEvent from long to double. This means that a PointerEvent whose pointerType is mouse will be a double.
HTML Living Standard
Die Definition von 'MouseEvent.region' in dieser Spezifikation.
Lebender Standard From Document Object Model (DOM) Level 3 Events Specification, added the region property.
Pointer Lock
Die Definition von 'MouseEvent' in dieser Spezifikation.
Anwärter Empfehlung From Document Object Model (DOM) Level 3 Events Specification, added movementX and movementY properties.
CSS Object Model (CSSOM) View Module
Die Definition von 'MouseEvent' in dieser Spezifikation.
Arbeitsentwurf From Document Object Model (DOM) Level 3 Events Specification, added offsetX and offsetY, pageX and pageY, x, and y properties. Redefined screen, page, client and coordinate (x and y) properties as double from long.
Document Object Model (DOM) Level 3 Events Specification
Die Definition von 'MouseEvent' in dieser Spezifikation.
Veraltet From Document Object Model (DOM) Level 2 Events Specification, added the MouseEvent() constructor, the getModifierState() method and the buttons property.
Document Object Model (DOM) Level 2 Events Specification
Die Definition von 'MouseEvent' in dieser Spezifikation.
Veraltet Initial definition.

Browserkompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Ja) (Ja) (Ja) (Ja) (Ja) (Ja)
movementX
movementY
37 (Ja) (Ja) moz ? (Ja) ?
buttons 43 (Ja) (Ja) ? ? Nicht unterstützt
which 1 (Ja) 1.0 9.0 5.0 1.0
getModifierState() 47 (Ja) 15 (15) (Ja) (Ja) (Ja)
mozPressure and mozInputSource This API has not been standardized. Nicht unterstützt ? 4.0 (2) Nicht unterstützt Nicht unterstützt Nicht unterstützt
MouseEvent() 45 ? 11 (11) 9.0 (Ja) ?
MouseEvent.region 51[1] ? 32 (32) ? ? ?
MouseEvent.offsetX, and MouseEvent.offsetY (Ja) 9 40 (40) ? ? ?
MouseEvent.screenXMouseEvent.screenYMouseEvent.clientX, and MouseEvent.Y are double instead of long. 56 ? ? ? ? ?
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Nicht unterstützt Nicht unterstützt (Ja) ? ? ? ?

[1] Setzt das Aktivieren von ExperimentalCanvasFeatures voraus.

Siehe auch

  • Das direkte Elternobjekt, UIEvent.