Element: `mousemove`-Ereignis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das mousemove-Ereignis wird bei einem Element ausgelöst, wenn ein Zeigegerät (in der Regel eine Maus) bewegt wird, während sich der Hotspot des Cursors innerhalb dieses Elements befindet.

Diese Ereignisse treten unabhängig davon auf, ob Maustasten gedrückt sind oder nicht. Sie können mit einer sehr hohen Rate ausgelöst werden, abhängig davon, wie schnell der Benutzer die Maus bewegt, wie leistungsfähig die Maschine ist, welche anderen Aufgaben und Prozesse ausgeführt werden usw.

Syntax

Nutzen Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Event-Handler-Eigenschaft.

js
addEventListener("mousemove", (event) => {});

onmousemove = (event) => {};

Ereignistyp

Ereigniseigenschaften

Diese Schnittstelle erbt auch Eigenschaften von ihren Eltern, UIEvent und Event.

MouseEvent.altKey Schreibgeschützt

Gibt true zurück, wenn die alt-Taste beim Auslösen des Mausereignisses gedrückt war.

MouseEvent.button Schreibgeschützt

Die Nummer der Taste, die (falls zutreffend) beim Auslösen des Mausereignisses gedrückt wurde.

MouseEvent.buttons Schreibgeschützt

Die Tasten, die (falls vorhanden) beim Auslösen des Mausereignisses gedrückt wurden.

MouseEvent.clientX Schreibgeschützt

Die X-Koordinate des Mauszeigers in Viewport-Koordinaten.

MouseEvent.clientY Schreibgeschützt

Die Y-Koordinate des Mauszeigers in Viewport-Koordinaten.

MouseEvent.ctrlKey Schreibgeschützt

Gibt true zurück, wenn die control-Taste beim Auslösen des Mausereignisses gedrückt war.

MouseEvent.layerX Nicht standardisiert Schreibgeschützt

Gibt die horizontale Koordinate des Ereignisses relativ zur aktuellen Ebene zurück.

MouseEvent.layerY Nicht standardisiert Schreibgeschützt

Gibt die vertikale Koordinate des Ereignisses relativ zur aktuellen Ebene zurück.

MouseEvent.metaKey Schreibgeschützt

Gibt true zurück, wenn die meta-Taste beim Auslösen des Mausereignisses gedrückt war.

MouseEvent.movementX Schreibgeschützt

Die X-Koordinate des Mauszeigers relativ zur Position des letzten mousemove-Ereignisses.

MouseEvent.movementY Schreibgeschützt

Die Y-Koordinate des Mauszeigers relativ zur Position des letzten mousemove-Ereignisses.

MouseEvent.offsetX Schreibgeschützt

Die X-Koordinate des Mauszeigers relativ zur Position des Padding-Randes des Zielknotens.

MouseEvent.offsetY Schreibgeschützt

Die Y-Koordinate des Mauszeigers relativ zur Position des Padding-Randes des Zielknotens.

MouseEvent.pageX Schreibgeschützt

Die X-Koordinate des Mauszeigers relativ zum gesamten Dokument.

MouseEvent.pageY Schreibgeschützt

Die Y-Koordinate des Mauszeigers relativ zum gesamten Dokument.

MouseEvent.relatedTarget Schreibgeschützt

Das sekundäre Ziel des Ereignisses, falls vorhanden.

MouseEvent.screenX Schreibgeschützt

Die X-Koordinate des Mauszeigers in Bildschirmkoordinaten.

MouseEvent.screenY Schreibgeschützt

Die Y-Koordinate des Mauszeigers in Bildschirmkoordinaten.

MouseEvent.shiftKey Schreibgeschützt

Gibt true zurück, wenn die shift-Taste beim Auslösen des Mausereignisses gedrückt war.

MouseEvent.mozInputSource Nicht standardisiert Schreibgeschützt

Der Typ des Geräts, das das Ereignis generiert hat (einer der MOZ_SOURCE_*-Konstanten). Damit können Sie beispielsweise feststellen, ob ein Mausereignis von einer tatsächlichen Maus oder durch ein Touch-Ereignis erzeugt wurde (was die Genauigkeit der Interpretation der mit dem Ereignis verbundenen Koordinaten beeinflussen könnte).

MouseEvent.webkitForce Nicht standardisiert Schreibgeschützt

Der aufgebrachte Druck beim Klicken.

MouseEvent.x Schreibgeschützt

Alias für MouseEvent.clientX.

MouseEvent.y Schreibgeschützt

Alias für MouseEvent.clientY.

Beispiele

Das folgende Beispiel verwendet die Ereignisse mousedown, mousemove und mouseup, um dem Benutzer das Zeichnen auf einem HTML-canvas zu ermöglichen. Seine Funktionalität ist einfach: die Linienstärke ist auf 1 festgelegt, und die Farbe ist immer schwarz.

Beim Laden der Seite werden die Konstanten myPics und context erstellt, um eine Referenz auf das Canvas und den 2D-Kontext zu speichern, den wir zum Zeichnen verwenden.

Das Zeichnen beginnt, wenn das mousedown-Ereignis ausgelöst wird. Zunächst speichern wir die x- und y-Koordinaten des Mauszeigers in den Variablen x und y und setzen dann isDrawing auf true.

Wenn die Maus über die Seite bewegt wird, wird das mousemove-Ereignis ausgelöst. Wenn isDrawing true ist, ruft der Ereignishandler die Funktion drawLine auf, um eine Linie von den gespeicherten x- und y-Werten bis zur aktuellen Position zu zeichnen.

Nachdem die Funktion drawLine() beendet ist, passen wir die Koordinaten an und speichern sie dann in x und y.

Das mouseup-Ereignis zeichnet das letzte Liniensegment, setzt x und y auf 0 und beendet das Zeichnen, indem isDrawing auf false gesetzt wird.

HTML

html
<h1>Drawing with mouse events</h1>
<canvas id="myPics" width="560" height="360"></canvas>

CSS

css
canvas {
  border: 1px solid black;
  width: 560px;
  height: 360px;
}

JavaScript

js
// When true, moving the mouse draws on the canvas
let isDrawing = false;
let x = 0;
let y = 0;

const myPics = document.getElementById("myPics");
const context = myPics.getContext("2d");

// event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas.

// Add the event listeners for mousedown, mousemove, and mouseup
myPics.addEventListener("mousedown", (e) => {
  x = e.offsetX;
  y = e.offsetY;
  isDrawing = true;
});

myPics.addEventListener("mousemove", (e) => {
  if (isDrawing) {
    drawLine(context, x, y, e.offsetX, e.offsetY);
    x = e.offsetX;
    y = e.offsetY;
  }
});

window.addEventListener("mouseup", (e) => {
  if (isDrawing) {
    drawLine(context, x, y, e.offsetX, e.offsetY);
    x = 0;
    y = 0;
    isDrawing = false;
  }
});

function drawLine(context, x1, y1, x2, y2) {
  context.beginPath();
  context.strokeStyle = "black";
  context.lineWidth = 1;
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
  context.stroke();
  context.closePath();
}

Ergebnis

Spezifikationen

Specification
UI Events
# event-type-mousemove
HTML
# handler-onmousemove

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mousemove event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch