MouseEvent.initMouseEvent() — Methode · JavaScript-Referenz

Signatur

MouseEvent.prototype.initMouseEvent(type, canBubble, cancelable, view, detail, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget)

Beschreibung

Mit initMouseEvent() werden alle Eigenschaften eines Mausereignisses gesetzt, das zuvor mit document.createEvent("MouseEvent") (oder "MouseEvents") erzeugt wurde. Erst danach kann das Ereignis per EventTarget.dispatchEvent() an ein Element gesendet werden. Das war lange Zeit der einzige Weg, Klicks, Mausbewegungen oder Doppelklicks programmatisch zu simulieren – etwa in Tests oder Automatisierungsskripten.

Die Methode muss vor dem Auslösen aufgerufen werden; ein Aufruf nach dispatchEvent() hat keine Wirkung. Alle 15 Parameter werden positional übergeben, was den Code schwer lesbar und fehleranfällig macht – schon ein vertauschtes Argument (z. B. clientX und screenX) führt zu falschen Koordinaten.

Die Methode gilt als veraltet. In modernem Code verwendet man den Konstruktor new MouseEvent(type, options), der ein benanntes Optionsobjekt akzeptiert, sinnvolle Standardwerte hat und zusätzliche Eigenschaften wie buttons unterstützt. initMouseEvent() ist nur noch für Altcode oder sehr alte Browser (Internet Explorer) relevant.

Parameter

Name	Typ	Beschreibung
$type Pflicht	string	Ereignistyp, z. B. `"click"`, `"mousedown"`, `"mouseup"`, `"mousemove"`, `"dblclick"`, `"mouseover"`, `"mouseout"`, `"contextmenu"`.
$canBubble Pflicht	boolean	Ob das Ereignis im DOM nach oben aufsteigt (`bubbles`).
$cancelable Pflicht	boolean	Ob die Standardaktion mit `preventDefault()` verhindert werden kann.
$view Pflicht	Window \| null	Das zugehörige Fenster, in der Regel `window`.
$detail Pflicht	number	Klickanzahl (`UIEvent.detail`), z. B. `1` für Einfach-, `2` für Doppelklick.
$screenX Pflicht	number	X-Koordinate relativ zum Bildschirm.
$screenY Pflicht	number	Y-Koordinate relativ zum Bildschirm.
$clientX Pflicht	number	X-Koordinate relativ zum Viewport.
$clientY Pflicht	number	Y-Koordinate relativ zum Viewport.
$ctrlKey Pflicht	boolean	Ob die Strg-Taste gedrückt war.
$altKey Pflicht	boolean	Ob die Alt-Taste gedrückt war.
$shiftKey Pflicht	boolean	Ob die Umschalttaste gedrückt war.
$metaKey Pflicht	boolean	Ob die Meta-Taste (Windows-/Cmd-Taste) gedrückt war.
$button Pflicht	number	Gedrückte Maustaste: `0` = links, `1` = Mitte, `2` = rechts.
$relatedTarget Pflicht	EventTarget \| null	Sekundäres Ziel, nur bei `mouseover`/`mouseout` u. ä. relevant, sonst `null`.

Beispiele

Klick auf einen Button simulieren (Altcode)

const button = document.querySelector('#speichern');
button.addEventListener('click', (e) => {
  console.log(`Klick bei ${e.clientX}/${e.clientY}, Taste ${e.button}`);
});

const evt = document.createEvent('MouseEvent');
evt.initMouseEvent(
  'click',   // type
  true,      // canBubble
  true,      // cancelable
  window,    // view
  1,         // detail (Klickanzahl)
  0, 0,      // screenX, screenY
  120, 45,   // clientX, clientY
  false, false, false, false, // ctrl, alt, shift, meta
  0,         // button: links
  null       // relatedTarget
);

button.dispatchEvent(evt);

Klick bei 120/45, Taste 0

Moderne Alternative: new MouseEvent()

const button = document.querySelector('#speichern');
button.addEventListener('click', (e) => {
  console.log('Strg gedrückt:', e.ctrlKey);
});

const evt = new MouseEvent('click', {
  bubbles: true,
  cancelable: true,
  view: window,
  clientX: 120,
  clientY: 45,
  ctrlKey: true,
  button: 0
});

button.dispatchEvent(evt);

Strg gedrückt: true

Hilfsfunktion mit Fallback für sehr alte Browser

const fireMouseEvent = (el, type, { x = 0, y = 0 } = {}) => {
  let evt;
  if (typeof MouseEvent === 'function') {
    evt = new MouseEvent(type, { bubbles: true, cancelable: true, view: window, clientX: x, clientY: y });
  } else {
    // Fallback z. B. für Internet Explorer
    evt = document.createEvent('MouseEvent');
    evt.initMouseEvent(type, true, true, window, 1, 0, 0, x, y,
      false, false, false, false, 0, null);
  }
  return el.dispatchEvent(evt);
};

const box = document.body;
box.addEventListener('contextmenu', (e) => e.preventDefault());
console.log(fireMouseEvent(box, 'contextmenu', { x: 10, y: 20 }));

false

// Wichtig · Fallstricke

Veraltet: Die Methode ist deprecated und kann langfristig entfernt werden. In neuem Code immer new MouseEvent() (bzw. new PointerEvent()) verwenden; initMouseEvent() nur als Fallback für Internet Explorer.
Aufruf nach dispatchEvent() oder während des Auslösens wird ignoriert.
Alle Parameter sind positional – fehlende oder vertauschte Argumente führen zu stillen Fehlern (z. B. falsche Koordinaten oder Taste).
Die Eigenschaft buttons (Bitmaske gedrückter Tasten) lässt sich hiermit nicht setzen und bleibt 0.
Synthetische Ereignisse haben isTrusted === false. Browser lösen dadurch keine vertrauenswürdigen Aktionen aus (z. B. Pop-ups, Vollbild, Zwischenablage); bei click auf Links/Checkboxen wird die Standardaktion aber teils dennoch ausgeführt.
Für einfache Klicks genügt oft HTMLElement.click().

Siehe auch

MouseEvent.getModifierState() TimeEvent.initTimeEvent() UIEvent.initUIEvent() CustomEvent.initCustomEvent() Event.initEvent()