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 (en-US)
, dblclick (en-US)
, mouseup (en-US)
, mousedown (en-US)
.
MouseEvent
wird vererbt von UIEvent
(en-US), welches wiederum vererbt wird von Event
. Obwohl die MouseEvent.initMouseEvent()
(en-US) Methode wegen der Rückwärtskompatibilität bleibt, sollte das Erstellen eines MouseEvent
Objekts durch den MouseEvent()
(en-US) Konstruktor erfolgen.
Mehrere spezifischere Events basieren auf MouseEvent, davon WheelEvent
(en-US) und DragEvent
.
Konstruktor
MouseEvent()
(en-US)- Erstellt ein
MouseEvent
Objekt.
Eigenschaften
Diese Schnittstelle erbt Eigenschaften der Elternobjekte UIEvent
(en-US) und Event
.
MouseEvent.altKey
(en-US) Schreibgeschützt- Gibt
true
zurück wenn die alt Taste gedrückt war, während das MouseEvent ausgelöst wurde. - Die Nummer des Buttons der gedrückt wurde (wenn anwendbar), während das MouseEvent ausgelöst wurde.
-
Die Buttons, die losgelassen wurden (sofern vorhanden) während das MouseEvent ausgelöst wurde.
MouseEvent.clientX
(en-US) Schreibgeschützt- Die x-Koordinate des Mauszeigers in lokalen (DOM Inhalt) Koordinaten.
MouseEvent.clientY
(en-US) Schreibgeschützt- Die y-Koordinate des Mauszeigers in lokalen (DOM Inhalt) Koordinaten.
MouseEvent.ctrlKey
(en-US) Schreibgeschützt- Gibt
true
zurück, wenn die control Taste gedrückt war, während das MouseEvent ausgelöst wurde. MouseEvent.metaKey
(en-US) Schreibgeschützt- Gibt
true
zurück, wenn die meta Taste gedrückt war, während das MouseEvent ausgelöst wurde. MouseEvent.movementX
(en-US) Schreibgeschützt- Die x-Koordinate des Mauszeigers relativ zur Position des letzten
mousemove (en-US)
Events. MouseEvent.movementY
(en-US) Schreibgeschützt- Die y-Koordinate des Mauszeigers relativ zur Position des letzten
mousemove (en-US)
Events. MouseEvent.offsetX
(en-US) Schreibgeschützt Experimental- Die x-Koordinate des Mauszeigers relativ zur Position zur padding-Kante des Zielknotens.
MouseEvent.offsetY
(en-US) Schreibgeschützt Experimental- Die y-Koordinate des Mauszeigers relativ zur Position zur padding-Kante des Zielknotens.
MouseEvent.pageX
(en-US) Schreibgeschützt Experimental- Die x-Koordinate des Mauszeigers relativ zum gesamten Dokument.
MouseEvent.pageY
(en-US) Schreibgeschützt Experimental- Die y-Koordinate des Mauszeigers relativ zum gesamten Dokument.
MouseEvent.region
(en-US) Schreibgeschützt- Gibt die id des Trefferbereichs wieder, die von dem Event betroffen ist. Wenn kein Trefferbereich betroffen ist, wird
null
zurückgegeben. -
Das sekundäre Zielobjekt des Events, sofern verfügbar.
MouseEvent.screenX
(en-US) Schreibgeschützt- Die x-Koordinate des Mauszeigers in globalen (Bildschirm) Koordinaten.
MouseEvent.screenY
(en-US) Schreibgeschützt- Die y-Koordinate des Mauszeigers in globalen (Bildschirm) Koordinaten.
MouseEvent.shiftKey
(en-US) Schreibgeschützt- Gibt
true
zurück, wenn die shift Taste gedrückt war, während das MouseEvent ausgelöst wurde. MouseEvent.which
(en-US) Non-Standard Schreibgeschützt- Der Button, der gedrückt war, als das MouseEvent ausgelöst wurde.
MouseEvent.mozPressure
Non-Standard 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) und1.0
(Maximalster Druckstärke) MouseEvent.mozInputSource
(en-US) Non-Standard 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
(en-US) Non-Standard Schreibgeschützt- Die Stärke des Drucks, die beim Klick angewendet wurde.
MouseEvent.x
(en-US) Experimental Schreibgeschützt- Alias auf
MouseEvent.clientX
(en-US). MouseEvent.y
(en-US) Experimental Schreibgeschützt- Alias auf
MouseEvent.clientY
(en-US)
Konstanten
MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN
(en-US) Non-Standard Schreibgeschützt- Minimum der Kraft, die für einen normalen Klick notwendig ist.
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN
(en-US) Non-Standard Schreibgeschützt- Minimum der Kraft, die für einen Force-Click notwendig ist.
Methoden
Das Interface erbt auch die Methoden seiner Eltern, UIEvent
(en-US) und Event
.
MouseEvent.getModifierState()
(en-US)- Gibt den aktuellen Zustand der angegebenen Modifizierungstaste zurück. Für Detailinformationen siehe
KeyboardEvent.getModifierState()
. MouseEvent.initMouseEvent()
(en-US) Deprecated- 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
Browserkompatibilität
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Ja) | (Ja) | (Ja) | (Ja) | (Ja) | (Ja) |
movementX (en-US)movementY (en-US) |
37 | (Ja) | (Ja) moz (en-US) | ? | (Ja) | ? |
buttons (en-US) |
43 | (Ja) | (Ja) | ? | ? | Nicht unterstützt |
which (en-US) |
1 | (Ja) | 1.0 | 9.0 | 5.0 | 1.0 |
getModifierState() (en-US) |
47 | (Ja) | 15 (15) | (Ja) | (Ja) | (Ja) |
mozPressure and mozInputSource (en-US)
Non-Standard
|
Nicht unterstützt | ? | 4.0 (2) | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
MouseEvent() (en-US) |
45 | ? | 11 (11) | 9.0 | (Ja) | ? |
MouseEvent.region (en-US) |
51[1] | ? | 32 (32) | ? | ? | ? |
MouseEvent.offsetX (en-US), and MouseEvent.offsetY (en-US) |
(Ja) | 9 | 40 (40) | ? | ? | ? |
MouseEvent.screenX (en-US), MouseEvent.screenY (en-US), MouseEvent.clientX (en-US), and MouseEvent.Y (en-US) 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
(en-US).