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.
addEventListener("mousemove", (event) => {});
onmousemove = (event) => {};
Ereignistyp
Ein MouseEvent
. Erbt von UIEvent
und Event
.
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. -
Die Nummer der Taste, die (falls zutreffend) beim Auslösen des Mausereignisses gedrückt wurde.
-
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.
-
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
<h1>Drawing with mouse events</h1>
<canvas id="myPics" width="560" height="360"></canvas>
CSS
canvas {
border: 1px solid black;
width: 560px;
height: 360px;
}
JavaScript
// 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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
mousemove event |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support