Element: mousemove-Ereignis
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Das mousemove-Ereignis wird auf einem Element ausgelöst, wenn ein Zeigegerät (in der Regel eine Maus) bewegt wird, während sich der Hotspot des Cursors darin befindet.
Diese Ereignisse treten auf, unabhängig davon, ob eine Maustaste gedrückt ist oder nicht. Sie können mit einer sehr hohen Rate ausgelöst werden, abhängig davon, wie schnell der Benutzer die Maus bewegt, wie schnell der Computer ist, welche anderen Aufgaben und Prozesse ausgeführt werden, usw.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("mousemove", (event) => { })
onmousemove = (event) => { }
Ereignistyp
Ein MouseEvent. Erbt von UIEvent und Event.
Beispiele
Das folgende Beispiel verwendet die mousedown-, mousemove- und mouseup-Ereignisse, um dem Benutzer zu ermöglichen, auf einem HTML-canvas zu zeichnen. Die Funktionalität ist einfach: Die Linienbreite ist auf 1 gesetzt, 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 werden.
Das Zeichnen beginnt, wenn das mousedown-Ereignis ausgelöst wird. Zuerst speichern wir die x- und y-Koordinaten des Mauszeigers in den Variablen x und y und setzen dann isDrawing auf true.
Wenn sich die Maus über die Seite bewegt, 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 zur aktuellen Position zu zeichnen.
Wenn die drawLine()-Funktion zurückkehrt, 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 weitere Zeichnen, indem es isDrawing auf false setzt.
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
| Spezifikation |
|---|
| Pointer Events # mousemove |
| HTML # handler-onmousemove |